{"id":1666,"date":"2021-11-30T13:46:51","date_gmt":"2021-11-30T12:46:51","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1666"},"modified":"2021-12-01T18:19:15","modified_gmt":"2021-12-01T17:19:15","slug":"using-lunacy-8-with-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/","title":{"rendered":"Using Lunacy 8 with Sketch2React"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\"><strong>God bless our amazing Slack community.<\/strong> If you knew how many of the things, discussed there, have found their way into our apps, you would probably be very surprised. Two of the biggest additions to Sketch2React this year has come after feedback. First we released <strong>our much beloved<\/strong> <a href=\"https:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=2ahUKEwiq8fyEn5r0AhXeAxAIHdt9DuEQFnoECAcQAQ&amp;url=https%3A%2F%2Fcapacitorjs.com%2F&amp;usg=AOvVaw1hSqOQB8vOEpESk-Al3Fyy\" target=\"_blank\" rel=\"noopener\">Capacitor.js<\/a> export feature thanks to feedback, and now we have introduced support for the brand-new <a href=\"https:\/\/icons8.com\/lunacy\" target=\"_blank\" rel=\"noopener\">Lunacy<\/a> for macOS.<\/p>\r\n<p class=\"\">I honestly didn\u2019t know about Lunacy until someone in our community talked about it, a couple of months ago. Of course, I was intrigued, here we have a free app, back then only for Windows, that reads and writes .sketch files. Mind blown.<\/p>\r\n<p class=\"\">Furthermore, it\u2019s made by <a href=\"https:\/\/icons8.com\/\" target=\"_blank\" rel=\"noopener\">Icons8<\/a> and anyone of you that have downloaded demos from us know we use their remarkable free illustrations frequently.<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1670\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r.png\" alt=\"\" width=\"1864\" height=\"1159\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r.png 1864w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-300x187.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1024x637.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-768x478.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1536x955.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-550x342.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-289x180.png 289w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-482x300.png 482w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-804x500.png 804w\" sizes=\"auto, (max-width: 1864px) 100vw, 1864px\" \/><\/a><\/p>\r\n<h2 class=\"\">Lunacy vs Sketch<\/h2>\r\n<p class=\"\">Just because Lunacy reads and writes in the amazing .sketch format it\u2019s a fundamentally different app, it\u2019s not a clone. <strong>Super important to understand this.<\/strong><\/p>\r\n<p class=\"\">For me, it\u2019s more like a nice combo of both Sketch and Figma with incredible features for collaboration, using cloud documents etc. It also has things that the other ones haven\u2019t, like a huge free library of icons, illustrations and stock photography. Plus many more things, you should really give it a try.<\/p>\r\n<p class=\"\">That being said, until now, Sketch2React has been made solely with Sketch in mind, so if you\u2019re looking for the best experience going from design file to code with Sketch2React the choice is obvious. <strong>Sketch is still the King of the Hill regarding Sketch2React.<\/strong><\/p>\r\n<figure id=\"attachment_1672\" aria-describedby=\"caption-attachment-1672\" style=\"width: 1666px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1672 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39.png\" alt=\"\" width=\"1666\" height=\"978\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39.png 1666w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-300x176.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-1024x601.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-768x451.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-1536x902.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-250x147.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-550x323.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-800x470.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-307x180.png 307w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-511x300.png 511w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-09.54.39-852x500.png 852w\" sizes=\"auto, (max-width: 1666px) 100vw, 1666px\" \/><\/a><figcaption id=\"caption-attachment-1672\" class=\"wp-caption-text\">We&#8217;ve updated Sketch2React 2021 Beta to work better with latest Lunacy<\/figcaption><\/figure>\r\n<h2 class=\"\">Let\u2019s test this!<\/h2>\r\n<p>Now that I\u2019ve given you a bit of well-needed perspective, let\u2019s get on with the fun stuff.<\/p>\r\n<p class=\"\">I\u2019ve done <strong>extensive testing<\/strong> the last couple of months and here are my findings. Most tests have been done with the current stable version of Sketch2React. Lately, I have also begun trying this out with the latest version of our <a href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react-demo\/\" target=\"_blank\" rel=\"noopener\">free beta<\/a>.<\/p>\r\n<h3 class=\"\">What works really well<\/h3>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>All of our Sketch2React freebies that have been created in Sketch that you can download from our marketplace<\/li>\r\n<li>Layer effects like drop shadows, blending modes, gradients (both linear and now also radial)<\/li>\r\n<li>Styling components<\/li>\r\n<li>Shared styles like typography, effects<\/li>\r\n<li>Styleguide<\/li>\r\n<li>Exporting to HTML, Capacitor and React<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1674\" aria-describedby=\"caption-attachment-1674\" style=\"width: 1830px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1674 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43.png\" alt=\"\" width=\"1830\" height=\"1126\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43.png 1830w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-300x185.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-1024x630.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-768x473.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-1536x945.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-250x154.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-550x338.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-800x492.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-293x180.png 293w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-488x300.png 488w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-12.54.43-813x500.png 813w\" sizes=\"auto, (max-width: 1830px) 100vw, 1830px\" \/><\/a><figcaption id=\"caption-attachment-1674\" class=\"wp-caption-text\">Lunacy comes with an impressive built-in library of gorgeous illustrations like these one.<\/figcaption><\/figure>\r\n<p class=\"\">That means that our framework, all the rules, all the components, render out correctly when editing and updating them directly from Lunacy. Wow.<\/p>\r\n<h2>How Lunacy handles overrides<\/h2>\r\n<p class=\"\">In Sketch2React we use the <strong>override&#8217;s panel in Sketch<\/strong> to solve the connections and logic we have in all of our interactive components. Since Lunacy does not handle overrides this way, this is a bit of a pickle for us, least to say.<\/p>\r\n<p class=\"\">In the very latest beta of Sketch2React we added automatic HTML links between artboards mostly to solve this with Lunacy. Turns out, it also benefits users of Sketch. Who doesn\u2019t want more automatic workflows in life?<\/p>\r\n<figure id=\"attachment_1679\" aria-describedby=\"caption-attachment-1679\" style=\"width: 1830px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1679\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13.png\" alt=\"\" width=\"1830\" height=\"1126\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13.png 1830w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-300x185.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-1024x630.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-768x473.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-1536x945.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-250x154.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-550x338.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-800x492.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-293x180.png 293w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-488x300.png 488w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/CleanShot-2021-11-30-at-13.06.13-813x500.png 813w\" sizes=\"auto, (max-width: 1830px) 100vw, 1830px\" \/><\/a><figcaption id=\"caption-attachment-1679\" class=\"wp-caption-text\">Basic logic like linking between artboards works thanks to our new automatic HTML links<\/figcaption><\/figure>\r\n<p class=\"\">So basically, the easiest way to put this is to say that:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Basic logic, like linking between artboards works thanks to our audition of automatic HTML linking<\/li>\r\n<li>All other logic does not work right now<\/li>\r\n<\/ul>\r\n<p class=\"\">If you can live with that, go ahead, try it out. Lunacy is 100% free and we have a limited free demo of Sketch2React available. We will continue to work together with the Lunacy team trying to figure out how to bend reality to our liking.<\/p>\r\n<p class=\"\">Like we always have done with Sketch.<\/p>\r\n<p>That&#8217;s all for this time folks, have a great one<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>God bless our amazing Slack community. If you knew how many of the things, discussed there, have found their way into our apps, you would probably be very surprised. Two of the biggest additions to Sketch2React this year has come after feedback. First we released our much beloved Capacitor.js export feature thanks to feedback, and&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Using Lunacy 8 with Sketch2React<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"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":[204,55],"class_list":["post-1666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-lunacy","tag-sketch2react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Lunacy 8 with Sketch2React | 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\/using-lunacy-8-with-sketch2react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Lunacy 8 with Sketch2React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"God bless our amazing Slack community. If you knew how many of the things, discussed there, have found their way into our apps, you would probably be very surprised. Two of the biggest additions to Sketch2React this year has come after feedback. First we released our much beloved Capacitor.js export feature thanks to feedback, and&hellip;&nbsp;Read More &raquo;Using Lunacy 8 with Sketch2React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-30T12:46:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-01T17:19:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Using Lunacy 8 with Sketch2React\",\"datePublished\":\"2021-11-30T12:46:51+00:00\",\"dateModified\":\"2021-12-01T17:19:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\"},\"wordCount\":661,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png\",\"keywords\":[\"Lunacy\",\"Sketch2react\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\",\"name\":\"Using Lunacy 8 with Sketch2React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png\",\"datePublished\":\"2021-11-30T12:46:51+00:00\",\"dateModified\":\"2021-12-01T17:19:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Lunacy 8 with Sketch2React\"}]},{\"@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":"Using Lunacy 8 with Sketch2React | 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\/using-lunacy-8-with-sketch2react\/","og_locale":"en_US","og_type":"article","og_title":"Using Lunacy 8 with Sketch2React - Sketch2React Blog","og_description":"God bless our amazing Slack community. If you knew how many of the things, discussed there, have found their way into our apps, you would probably be very surprised. Two of the biggest additions to Sketch2React this year has come after feedback. First we released our much beloved Capacitor.js export feature thanks to feedback, and&hellip;&nbsp;Read More &raquo;Using Lunacy 8 with Sketch2React","og_url":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-11-30T12:46:51+00:00","article_modified_time":"2021-12-01T17:19:15+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Using Lunacy 8 with Sketch2React","datePublished":"2021-11-30T12:46:51+00:00","dateModified":"2021-12-01T17:19:15+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/"},"wordCount":661,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png","keywords":["Lunacy","Sketch2react"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/","url":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/","name":"Using Lunacy 8 with Sketch2React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png","datePublished":"2021-11-30T12:46:51+00:00","dateModified":"2021-12-01T17:19:15+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/11\/lunacy-s2r-1.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/using-lunacy-8-with-sketch2react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Lunacy 8 with Sketch2React"}]},{"@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\/1666","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=1666"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1666\/revisions"}],"predecessor-version":[{"id":1684,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1666\/revisions\/1684"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1681"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}