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’t do that, we’re here to help!
Since you’re effectively turning things inside Sketch to real code elements in real time, when you do it wrong, our code app is extremely unforgiving. Bastard!
What is Sketch2React?
Sketch2React 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.
What you pay with is with your time and patience learning our framework rules, nothing comes for free my friend.
Checklist before throwing computer out the window
⚠️ = wrong ✅ = right
- Does the name of your .sketchfile contain any special characters like ”!” ”?” ⚠️ Language specific special characters like (for us) the swedish ä å ö seems to be working but to be super sure, use plain old English in file names ✅
- Is the page in Sketch that you want to be rendered to code named Start here ? Awesome ✅ ?? (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)
- Is the first artboard named Start ? ✅ Not start or STarT or sTART ⚠️
- Have you copy and pasted S2R symbols (like our buttons) from one of our demos but are missing a Symbols page in your doc? ⚠️ For all of our code components that are symbols to work, you need to have a Symbols page ✅
- Have you tried just restarting our code app? ✅
- Does your custom made CSS file contain any blank spaces in its file name? ⚠️ Make sure to name it somethinglikethis.css ✅
- Have you added a {externalasset.css} to each and every page that uses a custom CSS or/and uses externally linked web fonts? ✅
- Have you checked that the {externalasset.css} file path is correct? ✅
- Does the file path to your custom made CSS file contain any blank spaces? ⚠️ Make sure it looks something like this Dropbox/Code/CSS/somethinglikethis.css ✅
- Have you added a new {image} and it doesn’t show up in our code app? ⚠️ Re-link your .sketchfile to our code app and it will be there, we promise ✅
- Do you use the % character in a override in a S2R symbol? ⚠️ Really frustrating but don’t, if you need to use it, just write it out like this percent ✅
- Have you read this article? ✅
- Do you still use S2R? You must be a saint sirs and madams, bless you! ???????????????????
Have a great summer everyone!
Juan, Team Sketch2React