We ❤️ Medium
Click above to purchase our very latest DLC bundle — you get a nice 25% discount 🤙💥👏❤️💎
Myths about Sketch2React
Prologue
Dramatization of semi-true events (all sensitive data has been scrambled, things have been exaggerated for entertaining purposes)
– You know it happened again (J)
– What happened? (F)
– Got an email saying something like ”it does not work, I linked a 100 page Sketch file to your lousy ass ”Code App” and [beep beep] it doesn’t work yo bro” (J)
– Did they really say exactly that? (F)
– Of course not, but you know me, I love to exaggerate things. Life’s to effing boring without a bit of spicing on the top. You know that… (J)
– Oooookey… And? (F)
– So anyway, I was thinking I should write an article about all these things, misconceptions you know, so that we don’t need to get those emails anymore. But again, got me thinking… it doesn’t matter how clear we explain things. Did you know I have written 29 articles (this one is the 30th! ⛱) about Sketch2React since June 2018?
– I’m like obsessed with it. Explaining, doing tutorials.
– You know why? Cuz people don’t read anymore. That’s why! (J)
– Hmmm okey. (F)
– But I’ll write the piece anyway, it will be fun! (J)
Above conversation actually took place, mostly inside my head, but also with Fredrik. In the real world.
End of Prologue, let’s load the real article…
🔖 Real Article
Here’s a list of things that we have picked up during our alpha and beta programs since May 2018. Things that are easy to get wrong, misunderstand about our framework and code app. Important insights that we now share with you dear reader so you don’t need to.
Myth Nr 1 — Your Sketch file will automatically be converted to code
Truth: No way bro 🥳
If you are looking for a magical app, that with zero effort, converts your design thingies and layouts inside of Sketch, to real workable code — look further. We are not interested in building a one-button-solution since that usually comes with way to many sacrifices regarding exporting your code.
Biggest difference is that you do all of this in Sketch’s Layer List, pretty effing amazeballs.
- You must name each layer in Sketch accordingly to our framework and component rules. Or you will see nada sip in our code app.
- You must, by hand, as when coding, set up your grids that contains containers, rows, groups and columns. Biggest difference is that you do all of this in Sketch’s Layer List, pretty effing amazeballs.
- You must think more like a developer. That is actually a very good thing. You’ll learn about HTML and CSS constraints in the meantime. All very good things that will give you a deeper understanding on how development works. You may actually develop more empathy. I apologize beforehand.
- You’re enhancing your layers and comps with real code. You can’t cheat your way through this. There will be pain and frustrations 😂🔝🥳 Maybe you realize that this is not for you. That is also okay 👌 We’re glad you gave it a shot.
- If all this sounds like 🍌 start with these very short and simple Beginner Tutorials. Download all of our demo files and ePubs and start learning some really amazing things. It gets better and easier- we promise 😁🍻
Myth Nr 2 👉 This is perfect for really quick prototypes
Truth: Depends on how you measure time and effort
I wrote this article a way back in time. Now I’m taking it all back. Ha!
The article is about how to use our framework for what we call Quick Responsive Prototyping. Maybe I was a bit overly optimistic (a non-treatable condition I have). Sorry.
You still need to put in the extra hours here. If you’re looking for a tool that is easy to learn, does things for you, brews you coffee — look further. Use the built-in prototype tool in Sketch for that or the other ones (you know them).
But! If you’re a designer that wants to learn more about code, we can’t think about a more visual way of learning. In the meantime you will learn new valuable skills and impress your developers. And your clients (did you build this?).
So the name of the article should have been Fairly Quick Responsive Prototyping but that sounds like sh*t so … yeah … I bent the truth … a … bit? Or maybe not, maaaaybe you’re kind of a savant and it was easy peasy cup cakes for you? Was it? I salute you!
Myth Nr 3 👉 You can re-import exported code from our Code App into Sketch again
Truth: 🤭🤫
We are not Gandalf’s 🧙or Mandrake’s. This is not dark magic even if it has been called that. We are only humans (we think anyway, there’s no way of actually knowing).
Once you have exported your code from our code app forget about Sketch completely. Do all your changes directly in code and you will save yourself a lot of headaches.
All changes that you do directly in code will stay in code until you our your dev manually changes it.
Suggested solution
Honestly not even myself (that’s heavily invested in this) don’t have all the answers on the very best workflow for this. It will take time. We will all make mistakes. As always when learning new ways of working. But here’s a couple of ideas, suggestions.
- Do small changes directly in code — color, border radius, font sizes etc
- Do bigger changes directly in Sketch — grid settings, layout changes, big chunks of content changes, basically (for myself) everything that is a big pain in the [beep] doing in code. Again, I’m basing this only on my personal skills here, I’m not a developer. Deeeeeeesigner. 😆
- Great tip here is to use something like Plant, Abstract (ooooo nice website!) or Kactus to get proper versioning for teams. Be sure to communicate exactly what your role is here.
I suggest you sit down with your dev or devs and just show them what our framework can do. It all boils down to this, communication between humans. Show them all the benefits of working this close, you are actually helping them, not stealing their jobs. 😅
On other news!
Btw our React Export Module is progressing really well, we’re conducting a very private (personal invitation only) closed pilot during the whole of February. Not long after that we’re going to release an Early Adopters paid thingie for the ones that really need React export. There will still be a FREE version with HTML export (like it is right now).
This is how React.js code looks straight out of the box from our code app. This was done 100% inside of Sketch using our framework, code app and our upcoming React module.
All the best, Juan from Team Sketch2React
