Sketch2React Code Review — Simple Button

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?

Short answer

Nope ??

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
You have 100% control of our generated code after export, there is no hocus-pocus hidden things, everything is based on proven web tech (HTML, CSS, Javascript, Bootstrap, Create React App)
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

Simple Button

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.

All of our components that have interactivity needs to be turned into Symbols first

…and this is how the symbol is structured

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. ?

This is what gets exported in our HTML export — just drag and drop onto server and your good to go

?

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