We have since the very start of our framework had a very designer focused explanation about the what, the how and so on.
The more advanced our framework and code app gets we have, after feedback from you guys, realized we need to shift focus a bit.
Or at least talk more about the actual code output. So here we go ??
Is it crappy code?
First of all let’s talk about the elephant in the room. The one question every good designers and developer thinks when hearing the words “generated code”:
- Is it crap ??
- Is it spaghetti ? code?
We are extremely proud of our output, we think it’s great given the fact that:
- You code with easy to learn snippets directly inside of Sketch
- Actual real people (no fake marketing scheme here) have said things like ”It produces clean, almost hand-tooled HTML code with external CSSs and JSs”
Also ? What is the purpose of spending endless amounts of hours developing something that outputs crap? None my friends. But don’t take our word for it, it is only you that can judge with your own set of perspectives on what is great or trash. On to the next level then. ? ?
The next level of scrutiny
Here we prefer to actually show you what it exactly looks like. So here’s an example done ? % inside of Sketch and exported to code via our code app. No overhead done after export, no special add-ons.
This walkthrough is based on the latest version of Sketch2React
Let’s start really simple with one of my personal favourite components — the button! Oh how versatile you are my old friend ? ?
Lets look inside of Sketch?
First let’s look in Sketch app how this component is structured. Remember, all of this is done 100% inside of Sketch without plugins, just using the built-in tools like text tool, rectangle tool etc.
Let’s export this to code!
Our HTML export (Download?HTML) bundles everything you have added inside of Sketch, according to our framework rules, plus all external files. An example is, if you have created your very own CSS plugin it also bundles it, into a nice little neat .zip file. ?
Simple Button — HTML Export
Simple Button — React Export
Our React export (Download ?React) uses the awesome Create React App so that you with zero knowledge about React, can build React powered websites directly from inside Sketch app ? How awesome is that?
That’s it! This was part 1 of deconstructing our code components, in the next part we’ll take a look at this beautiful card component ? ?
Tutorial — How to add exported code to CodePen
Curious on how to do this yourself? You’re in luck pal, here’s a brand new video tutorial where we show you how-to.
All the best
Juan, Team Sketch2React