What is Sketch2React?

Sketch2React is a framework consisting of two parts:

  • A Sketch plugin that helps you with the Sketch2React naming convention and creating content containers for your layouts in Sketch, so that your content flows and sticks to the responsive Bootstrap grid.

  • A web app that converts your Sketch files into actual code. Both as plain, fully responsive downloadable html pages as well as fully functional React components (React view is still under heavy development).

Here’s a simple demo of what you can do once you have exported your code. Here's a couple of handy tutorials. 📼

When use our framework?

Our framework is really great for many things like for example:

  • Static websites like for example portfolios, landing pages, product pages

  • Advanced prototypes that you need to be real code

When should I not use your framework?

All things that require complex logic that we don't yet support. On the other hand, designers can set up things like the grid, colors, fonts, general layout rules and with that developers can do anything. Sky is the limit!

Do I upload my .sketchfile somehow to your web app?

Nope! Everything is handled locally on your computer, nothing gets uploaded to our servers. Super safe. We promise.

What is the .sketchplugin for?

You actually don’t need the plugin but it will make your workflow so much faster. It works a bit like a wizard that helps you with all of the really tedious stuff like creating containers, choosing margin and paddings etc. All of these settings can be changed afterwards in Sketchs layer panel.

Can I use web fonts like Google Fonts?

Yes you can! Actually it’s really easy, check out our handy Cheat Sheet for further instructions.

How do I export to HMTL?

You use our Previewer App for that.

  1. First drag your .sketchfile to our Previewer App

  2. Make sure you have setup everything accordingly to our framework inside of Sketch

  3. Click on the little animated Sketch2React logo up in the left corner

  4. Choose "Download HTML version"

  5. Save it to your HD or directly to your server

  6. Do this for each artboard that you have in your prototype

Does it cost money?

During our private alpha, no. Everything you create with it will forever be free. What happens after the alpha we currently don’t know. We're fiddling with the thought that everything will be free up until you (in a future release) will be able to export directly to React. So basically you can learn the tool, use it for free, even export to HTML but when you want sexy React thingies you will have to pay. It's actually the only way we can insure that this has a long and bright future, no one can survive on free company coffee. ☕️

How stable is the alpha?

It's really stable. We call it alpha because we have not reached our goal yet. Not because it's flawed or super buggy. You can read an article here if you’re interested.

☕️☄️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 🤗