{"id":80,"date":"2019-06-30T14:14:34","date_gmt":"2019-06-30T12:14:34","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/06\/30\/the-frustraded-guide-to-sketch2react\/"},"modified":"2020-06-18T07:26:59","modified_gmt":"2020-06-18T07:26:59","slug":"the-frustraded-guide-to-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/","title":{"rendered":"The Frustraded Guide To Sketch2React"},"content":{"rendered":"
\n


\n<\/figure>\n

Think of this as your go-to document when things go south <\/strong>with Sketch2React<\/a>. When you are visited by the spinning S2R logo from hell. When sh*t hits the fan. Moments when you just want to take your computer machine thingie and throw it out your window.<\/p>\n

Please don\u2019t do that, we\u2019re here to help!<\/em><\/p>\n

Since you\u2019re effectively turning things inside Sketch to real code elements in real time, when you do it wrong, our code app is extremely unforgiving. Bastard!<\/p>\n

What is Sketch2React?<\/h3>\n

Sketch2React<\/a> is the most advanced free design to code component framework for Sketch in the world. You convert your Sketch design thingies into well written, almost hand-coded HTML5 and React code, 100% free, no watermarks.<\/p>\n

What you pay with is with your time and patience learning our framework rules, nothing comes for free my friend.<\/p>\n

Checklist before throwing computer out the\u00a0window<\/h4>\n

\u26a0\ufe0f = wrong \u2705 =\u00a0right<\/h4>\n
    \n
  1. Does the name of your\u00a0.sketchfile <\/strong>contain any special characters like \u201d!\u201d \u201d?\u201d \u26a0\ufe0f Language specific special characters like (for us) the swedish \u00e4 \u00e5 \u00f6<\/em> seems to be working but to be super sure, use plain old English in file names \u2705<\/li>\n
  2. Is the page in Sketch<\/strong> that you want to be rendered to code named Start here<\/strong>\u00a0? Awesome \u2705 ?? (In a future update our code app will also accept Page 1 since that is the auto naming when creating a blank new Sketch doc<\/em>)<\/li>\n
  3. Is the first artboard named Start<\/strong>\u00a0? \u2705 Not start or STarT or sTART \u26a0\ufe0f<\/li>\n
  4. Have you copy and pasted S2R symbols (like our buttons) from one of our demos but are missing a Symbols page<\/strong> in your doc? \u26a0\ufe0f For all of our code components that are symbols to work, you need to have a Symbols page \u2705<\/li>\n
  5. Have you tried just restarting our code app? \u2705<\/li>\n
  6. Does your custom made CSS file contain any blank spaces in its file name? \u26a0\ufe0f Make sure to name it somethinglikethis.css<\/em> \u2705<\/li>\n
  7. Have you added a {externalasset.css}<\/strong> to each and every page that uses a custom CSS or\/and uses externally linked web fonts? \u2705<\/li>\n
  8. Have you checked that the {externalasset.css} file path is correct? \u2705<\/li>\n
  9. Does the file path to your custom made CSS file contain any blank spaces? \u26a0\ufe0f Make sure it looks something like this Dropbox\/Code\/CSS\/somethinglikethis.css<\/em><\/strong> \u2705<\/li>\n
  10. Have you added a new {image}<\/strong> and it doesn\u2019t show up in our code app? \u26a0\ufe0f Re-link your\u00a0.sketchfile to our code app and it will be there, we promise \u2705<\/li>\n
  11. Do you use the % character<\/strong> in a override in a S2R symbol? \u26a0\ufe0f Really frustrating but don\u2019t, if you need to use it, just write it out like this percent<\/strong> \u2705<\/li>\n
  12. Have you read this article<\/a>? \u2705<\/li>\n
  13. Do you still use S2R? You must be a saint sirs and madams, bless you! ????\u200d???\u200d??\u200d???\u200d???\u200d???\u200d?<\/li>\n<\/ol>\n

    Have a great summer everyone!<\/p>\n

    Juan, Team Sketch2React<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    Think of this as your go-to document when things go south with Sketch2React. When you are visited by the spinning S2R logo from hell. When sh*t hits the fan. Moments when you just want to take your computer machine thingie and throw it out your window. Please don\u2019t do that, we\u2019re here to help! Since… Read More »The Frustraded Guide To Sketch2React<\/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":[133,134,10,55,9],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-guide","tag-help","tag-sketch","tag-sketch2react","tag-tutorial"],"yoast_head":"\nThe Frustraded Guide To 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\/the-frustraded-guide-to-sketch2react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Frustraded Guide To Sketch2React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Think of this as your go-to document when things go south with Sketch2React. When you are visited by the spinning S2R logo from hell. When sh*t hits the fan. Moments when you just want to take your computer machine thingie and throw it out your window. Please don\u2019t do that, we\u2019re here to help! Since… Read More »The Frustraded Guide To Sketch2React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-30T12:14:34+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*OVrnCa4WcFwiTWHXRx4u0A.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"The Frustraded Guide To Sketch2React\",\"datePublished\":\"2019-06-30T12:14:34+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\"},\"wordCount\":472,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg\",\"keywords\":[\"Guide\",\"Help\",\"Sketch\",\"Sketch2react\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\",\"name\":\"The Frustraded Guide To Sketch2React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg\",\"datePublished\":\"2019-06-30T12:14:34+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Frustraded Guide To Sketch2React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & 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":"The Frustraded Guide To 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\/the-frustraded-guide-to-sketch2react\/","og_locale":"en_US","og_type":"article","og_title":"The Frustraded Guide To Sketch2React - Sketch2React Blog","og_description":"Think of this as your go-to document when things go south with Sketch2React. When you are visited by the spinning S2R logo from hell. When sh*t hits the fan. Moments when you just want to take your computer machine thingie and throw it out your window. Please don\u2019t do that, we\u2019re here to help! Since… Read More »The Frustraded Guide To Sketch2React","og_url":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-06-30T12:14:34+00:00","article_modified_time":"2020-06-18T07:26:59+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"The Frustraded Guide To Sketch2React","datePublished":"2019-06-30T12:14:34+00:00","dateModified":"2020-06-18T07:26:59+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/"},"wordCount":472,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg","keywords":["Guide","Help","Sketch","Sketch2react","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/","url":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/","name":"The Frustraded Guide To Sketch2React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg","datePublished":"2019-06-30T12:14:34+00:00","dateModified":"2020-06-18T07:26:59+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*OVrnCa4WcFwiTWHXRx4u0A.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/the-frustraded-guide-to-sketch2react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"The Frustraded Guide To Sketch2React"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & 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\/80","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=80"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":323,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions\/323"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}