🎁 Latest version & docs

Introducing Sketch2React — Real code prototyping inside of Sketch

The biggest difference between this and other prototyping tools is that you **design with real code**. That gives you high fidelity HTML prototypes right from scratch.

After 5–6 months of late night/early morning development me and Fredrik Ward are very happy to announce the private alpha of our Sketch2React product {insert happiness here} 👨🏻‍💻🌛

📝Edit: Upvote us on Product Hunt if you believe in this product 🌵🤗

We love you Chris Pratt you seem like a great guy

What is this?

Sketch2React.io is a .sketchplugin, a framework and a React web app that converts Sketch design files into prototype React code. That spits out real HTML. Very super!

  • A .sketchplugin that speeds up the workflow + a React render app
  • Design with code inside of Sketch that is actually easy to learn!
  • Build true HTML prototypes within Sketch
  • No export required!
  • Treat the layers view in Sketch as a code editor
  • From the Sketch2React Previewer app you can export each artboard as separate .html files for embedding/exporting to your own server
  • Everything is based on Bootstrap 4
  • Embedd Google fonts + icon fonts directly from inside of Sketch
This is one of the demo files you get when signing up

Why did we build this?

Both Fredrik and me are very curious by nature, and we are totally obsessed with trying to work smarter and smarter each and everyday. We where thinking “oookey so Juan designs stuff inside of Sketch and then sends it over to Fredrik via Zeplin and then Fredrik codes it with React”. Pretty standard design+development procedure anno 2018 wouldn’t you say? Yup.
Sooooo wait. What if we could design and build stuff directly inside of Sketch, already setting up things like columns, margins, paddings, media queires etc etc? And use Bootstrap in the background so we get the famous grid and responsiveness? Plus all of those sweet components. Boom 💥

Serendipity

In the process of building a true Sketch to React workflow (we’re not there yet) we discovered several amazing “side effects”. We wanted to be able to view our design+code prototypes on our phones so we needed to be able to download .html files of each artboard rendered through our React app. But wait! The fonts look odd. Yeah we need to be able to have some kind of {externalasset.css} thingie for Google Fonts (or others). Check. Woooooow wait a minute. What else is a font but also a icon? Icon fonts of course! 
Hold on. WTF I can build simple websites now straight out of Sketch? Yes you can. Here’s a vanilla demo, 100% done inside of Sketch. 💎😋👍

Another cool thing. Turns out building true HTML prototypes within Sketch that you can put on your own secure servers is perfect for user testing. Just hook up Hotjar and you’re good to go.

Enough talk!

Go get the private alpha and start building amazing things. It’s called private only because we need your email and consent for sending you the files.

Feel totally free to use this hashtag if you build stuff you want to share with the world #sketch2react. Also we we’ll be adding components along the way like forms, mega menus, side menus etc but we’ll save that for future updates or we might even take a couple of bucks for more advanced components that take time (and money) to design and build. But for now everything is in happy free alpha.

Couple of good resources

💯Pro tips

The Midnight plugin is a perfect companion to ours since being able to use both color tags and indent guides makes life much much easier.

System requirements

  • Sketch 50.0 up to 51.2
  • Previewer App, just drag+drop to this url to test your .sketchfile. Use latest Chrome browser for our preview app, it has stellar web app support.
  • Mac OSX Sierra 10.12.6–OSX High Sierra 10.13.4
  • We use these free Google fonts in our demos: Roboto, Lora & Varela Round. Make sure you have them installed on your computer. Easiest way to do this is with the great Skyfonts app.
  • We also use Ion Icons in our Mobile Example Demo, please make sure you have the icon font installed before opening our demos. Easiest way to install is by using the free and excellent Icon Font plugin for Sketch.

☕️☄️Coffee powered

Software as good as this doesn’t write itself. It’s powered by absurd amounts of coffee. And the occasional celebration beer 🍺 now and then. So if you are enjoying using this product and you think it has a future, please consider donating a few bucks. It will boost us and makes us very happy. And what happens when people are happy? They keep on doing things that make them happy 🤗