{"id":57,"date":"2019-10-04T01:48:45","date_gmt":"2019-10-03T23:48:45","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/10\/04\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/"},"modified":"2020-06-18T07:26:59","modified_gmt":"2020-06-18T07:26:59","slug":"lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/","title":{"rendered":"Lets dive deep into Sketch2React 1.6+ ? ?"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png\"><br \/>\n<\/figure>\n<blockquote><p>Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.7 (early access). And a <strong>nice discount code <\/strong>on the bottom of this\u00a0article.<\/p><\/blockquote>\n<h3>We now have support for Sketch v59\u00a0?<\/h3>\n<p><span>F<\/span>irst time I wrote this article we still had a small issue with version 58 of Sketch. We smashed that ?and nice surprise to us\u200a\u2014\u200ait also works great with the brand new, v59! ??\u2705<\/p>\n<p>This update makes it even easier to have 1:1 between Sketch and code with the new amazing feature Smart Layout that works really well together with our framework. Since our components have been responsive from the very beginning you now (if you create S2R code components with Smart Layout enabled) get an even faster workflow. Joooooy ?<\/p>\n<p>Check out our S2RShared Library Demo Docs 58 with a few <strong>Smart Layout enabled components:<\/strong><\/p>\n<p><a href=\"https:\/\/sketch.cloud\/s\/gEvOd\">https:\/\/sketch.cloud\/s\/gEvOd<\/a><\/p>\n<p>And as always, a release this big deserves a new trailer ?<\/p>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Sketch 59 Support is here!\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/1tYTaH1ktok?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<hr>\n<p><span>Y<\/span>ou know, it can be really hard keeping track of things. There are so much awesome things being released each and every day (damn you Product Hunt), no wonder you can feel a bit out of the loop. I love <a href=\"https:\/\/medium.com\/the-mission\/how-basecamp-built-a-100-billion-business-by-doing-less-on-purpose-5f978ce6478c\" target=\"_blank\" rel=\"noopener noreferrer\">this article<\/a> about how Basecamp has grown to a very big business over time, like an eternity in internet years. I specially love this quote:<\/p>\n<blockquote><p>\u201dGrow slowly or not at all.\u201d<\/p><\/blockquote>\n<p><a href=\"https:\/\/tenor.com\/T0XK.gif\">https:\/\/tenor.com\/T0XK.gif<\/a><\/p>\n<p><span>F<\/span>rom the very beginning we have shipped, small small updates, sometimes huge ones. <em>But we have continued. <\/em>Slowly.<\/p>\n<p>From the very start <a href=\"https:\/\/sketch2react.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React<\/a> looked and behaved very different from where we are today. Heck it took us almost <strong>1 year to get React support<\/strong>. <em>Yet we continued. Slooooooowly.<\/em><\/p>\n<p>We opened up the door and said \u201dhey guys, we\u2019re doing something a bit odd here, what do you think about it?\u201d.<\/p>\n<p>Over 50% of what our framework and code app is today are features that we\u2019ve added <em>after<\/em> getting feedback. We have showed this on meet-ups, closed big company board rooms but mostly over the internet, specially Sketch App Sources has been a great place ?. All of you who have contributed are heroes in our eyes. ?\u200d\u2640 ??\u200d\u2642\ufe0f<\/p>\n<p><a href=\"https:\/\/tenor.com\/EYSc.gif\">https:\/\/tenor.com\/EYSc.gif<\/a><\/p>\n<hr>\n<h3>The Big\u00a0Four<\/h3>\n<p>Enough chitchat, here\u2019s the biggest four new features in v1.6+ ?<\/p>\n<h3>Nr 1\u200a\u2014\u200aSupport for Sketch Shared Libraries ?<\/h3>\n<p><span>T<\/span>his one alone is so huge I can\u2019t even describe it in accurate wording. <em>We are ahead of our time and people have not yet fully understood the implication of this feature.<\/em><\/p>\n<p>Let\u2019s try. ? \u262e\ufe0f<\/p>\n<p>You now can today right from inside Sketch, without any plugins <strong>build, maintain and distribute a full fledged Design System (with real code components)\u2026<\/strong><\/p>\n<p><a href=\"https:\/\/tenor.com\/3p2e.gif\">https:\/\/tenor.com\/3p2e.gif<\/a><\/p>\n<p><em>Real code.<\/em><\/p>\n<p>Distributed via <strong>Sketch Cloud<\/strong> or whatever other cloud service you may use. You get <strong>1:1 design to code<\/strong>. Will it take you time to build? Of course it will. But you\u2019re a designer, you\u2019re used to building stuff and rebuilding over and over again. \u2764\ufe0f ?<\/p>\n<p>Thing is, once you have built and designed your component (inside of Sketch) you convert it into a<strong> Sketch Symbol<\/strong> and share it everywhere you need.<\/p>\n<p>Your own documents, with your team, or why not build up a real design to code design system for a client of yours?<\/p>\n<p>You change your Sketch Shared Library in<strong> one place<\/strong> and all others using the very same library will get notified and just re-update. ?It even auto-updates inside our code app if you happen to have a code Sketch document open at the same time.<\/p>\n<p>We know this way of working is really cutting edge and new, but in a few years (maybe less) with think everyone will be doing this. You can quote me on that one. ? ?<\/p>\n<h4>Try it out right now\u00a0?<\/h4>\n<p>Do you already have version 1.6+ because you are an awesome person who already have bought our latest payed DLC? Then here you go, feel free to add our <a href=\"https:\/\/sketch.cloud\/s\/2b301\" target=\"_blank\" rel=\"noopener noreferrer\">public (still growing and adding thingies) Shared Lib right now<\/a>.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1800\" data-height=\"1440\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*TISv_KzhO1i0Zi0YT6Zeww@2x.png\"><figcaption class=\"wp-caption-text\">We will keep adding components ?- our goal is to add all of the ones, slightly rebranded, that we have in most of our free demo documents.<\/figcaption><\/figure>\n<hr>\n<h3>Nr 2\u200a\u2014\u200aSupport for Sketch Cloud Documents<\/h3>\n<p><span>S<\/span>ketch Cloud Documents is still in beta but we have already built-in support for it. ?Both these features opens up amazing new super powers for all Sketch users. Bohemian Coding have been very generous with what is included in the single license, you get things like<\/p>\n<h4>How to get Sketch Cloud Docs this working on your Mac\u00a0?<\/h4>\n<p>Sketch Cloud Docs are hidden inside the (by default hidden) Library folder on your Mac. ? <a href=\"http:\/\/osxdaily.com\/2016\/12\/12\/show-user-library-folder-macos-sierra\/\" target=\"_blank\" rel=\"noopener noreferrer\">You need to do this first of all.<\/a><\/p>\n<p>After that, make sure you go to <strong><em>Library\/Application Support\/com.bohemiancoding.sketch3\/CloudDocuments<\/em><\/strong> and save this shortcut to your Favorites (like I have done below).<\/p>\n<p>You\u2019ll find your Sketch Cloud files inside those folders with jibbrish-names on them, lot of numbers and characters. ??Just open up our Code App (version 1.6 pre-release) and you\u2019re good to go, now every time you make changes inside this document (which is a cloud doc) they will upload to Sketch Cloud. Understand that this feature is still in beta and it sometimes can take a while for the docs to upload to Sketch Cloud.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3344\" data-height=\"1920\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*avwnlJ90kOpeK3NRA4l7Ww.png\"><figcaption class=\"wp-caption-text\">The files are in the folder named CloudDocuments ??<\/figcaption><\/figure>\n<hr>\n<h3>Nr 3\u200a\u2014\u200aThree new amazing components ?<\/h3>\n<p><span>Y<\/span>ou might be thinking \u201dokey this is all cool and well and stuff but I need more components dude, where are does drop-downs bro?\u201d or \u201dMan I think Bootstrap feels really old, I want to use Material Design UI &amp; Grids instead\u201d. <em>Yes we here you.<\/em>?<\/p>\n<h4>? <strong>Enter the mind-blowing {div} component<\/strong><br \/>\n<\/h4>\n<p><strong>Feel like overriding Bootstraps grid? <\/strong>Just use <a href=\"https:\/\/www.muicss.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Material Design UI<\/a> ?<\/p>\n<pre><code>Instead of {container} you do this:<br><strong>{div} [mui-container]<\/strong><br><br>Instead of {row} you do this:<br><strong>{div} [mui-row]<\/strong><br><br>Instead of {col} you do this:<br><strong>{div} [mui-col]<\/strong><\/code><\/pre>\n<pre>Easy peasy! ??<\/pre>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"712\" data-height=\"624\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*q2sOtbDPSH4vE6VuRa6YFQ.png\"><figcaption class=\"wp-caption-text\">Example structure for setting up the Material Design\u00a0Grid<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.dropbox.com\/s\/4815z7x1jlyrfxt\/Material%20Design%20Grids.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download above demo document to try it our right now.<\/a><\/p>\n<h3>Here\u2019s Fredrik explaining this a bit\u00a0more<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - How to add Material Design UI to Sketch app\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/y3pPvBClrPs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>Build your own components<\/h3>\n<p>Just drag your developer in front of your computer screen and scream \u201d<em>wtf man I can create anything I want with this new {div} component!<\/em>\u201d With just a bit of code knowledge, using your own CSS plugins you can build anything.<\/p>\n<h4>Important side<\/h4>\n<p>We support styling all of our own components directly from within Sketch. With the {div} component you will need to add the styling outside of Sketch in your CSS files. Or use something like the above mentioned Material Design UI.<\/p>\n<h3>Nr 4\u200a\u2014\u200aCSS Modules &amp; much cleaner code export\u00a0?<\/h3>\n<p><span>We<\/span> live and die with our code export so we care very much about it. Here\u2019s some loving coming our way.<\/p>\n<h4>? ? CSS-modules<\/h4>\n<p>Our React export now utilizes CSS-modules. This means the dependency on Sketch2React\u2019s package (@sketch2react\/react-components) is gone! <strong>No dependency on us once your React code is exported!<\/strong> ?<\/p>\n<h4>? ? Updated React export\u2019s dependencies<\/h4>\n<p>We\u2019ve updated the React export\u2019s dependencies to remove package vulnerabilities.<\/p>\n<h4>? ? Clean-up in the React\u00a0export<\/h4>\n<p>You no longer get warnings about \u201cunused variables\u201d in the console because, guess what, there are none! ?<\/p>\n<hr>\n<h3>We ? Sketch App\u00a0Sources<\/h3>\n<p>Since the very beginning of Sketch2React, this very place you\u2019re reading this very article has been very very good to us. We want to give something back to all readers of this amazing publication. So here you go dear reader, here\u2019s a <strong>35% discount code<\/strong>. It\u2019s nice to give back. ?<\/p>\n<p><a href=\"https:\/\/sketch.cloud\/s\/gEvOd\">https:\/\/sketch.cloud\/s\/gEvOd<\/a><\/p>\n<p>Love, Team Sketch2React<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.7 (early access). And a nice discount code on the bottom of this\u00a0article. We now have support for Sketch v59\u00a0? First time I wrote this article we still had a small issue with version 58&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Lets dive deep into Sketch2React 1.6+ ? ?<\/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":[5,29,18,55],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-code","tag-design","tag-sketch-app","tag-sketch2react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lets dive deep into Sketch2React 1.6+ ? ? | 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\/lets-dive-deep-into-sketch2react-1-6-\ud83e\udd16-\ud83d\udcaa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lets dive deep into Sketch2React 1.6+ ? ? - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.7 (early access). And a nice discount code on the bottom of this\u00a0article. We now have support for Sketch v59\u00a0? First time I wrote this article we still had a small issue with version 58&hellip;&nbsp;Read More &raquo;Lets dive deep into Sketch2React 1.6+ ? ?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-\ud83e\udd16-\ud83d\udcaa\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-03T23:48:45+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*1E_SwuHpvxGii46MMCQP3A.png\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Lets dive deep into Sketch2React 1.6+ ? ?\",\"datePublished\":\"2019-10-03T23:48:45+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\"},\"wordCount\":1263,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png\",\"keywords\":[\"Code\",\"Design\",\"Sketch App\",\"Sketch2react\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\",\"name\":\"Lets dive deep into Sketch2React 1.6+ ? ? - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png\",\"datePublished\":\"2019-10-03T23:48:45+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lets dive deep into Sketch2React 1.6+ ? ?\"}]},{\"@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":"Lets dive deep into Sketch2React 1.6+ ? ? | 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\/lets-dive-deep-into-sketch2react-1-6-\ud83e\udd16-\ud83d\udcaa\/","og_locale":"en_US","og_type":"article","og_title":"Lets dive deep into Sketch2React 1.6+ ? ? - Sketch2React Blog","og_description":"Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.7 (early access). And a nice discount code on the bottom of this\u00a0article. We now have support for Sketch v59\u00a0? First time I wrote this article we still had a small issue with version 58&hellip;&nbsp;Read More &raquo;Lets dive deep into Sketch2React 1.6+ ? ?","og_url":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-\ud83e\udd16-\ud83d\udcaa\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-10-03T23:48:45+00:00","article_modified_time":"2020-06-18T07:26:59+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Lets dive deep into Sketch2React 1.6+ ? ?","datePublished":"2019-10-03T23:48:45+00:00","dateModified":"2020-06-18T07:26:59+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/"},"wordCount":1263,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png","keywords":["Code","Design","Sketch App","Sketch2react"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/","url":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/","name":"Lets dive deep into Sketch2React 1.6+ ? ? - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png","datePublished":"2019-10-03T23:48:45+00:00","dateModified":"2020-06-18T07:26:59+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1E_SwuHpvxGii46MMCQP3A.png"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/lets-dive-deep-into-sketch2react-1-6-%f0%9f%a4%96-%f0%9f%92%aa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Lets dive deep into Sketch2React 1.6+ ? ?"}]},{"@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\/57","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=57"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}