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).
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
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!
Nope! Everything is handled locally on your computer, nothing gets uploaded to our servers. Super safe. We promise.
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.
Yes you can! Actually it’s really easy, check out our handy Cheat Sheet for further instructions.
You use our Previewer App for that.
First drag your .sketchfile to our Previewer App
Make sure you have setup everything accordingly to our framework inside of Sketch
Click on the little animated Sketch2React logo up in the left corner
Choose "Download HTML version"
Save it to your HD or directly to your server
Do this for each artboard that you have in your prototype
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. ☕️
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.
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 🤗