Here’s a brief article on how to use our magical Previewer App that we secretly call Batman Ninja. ?
Since you do all of the setup and designing inside of Sketch you will at some point want to see how it actually looks in code. That’s when you fire up our awesome Previewer App (web version).
A great workflow is (if you have two screens) to have Sketch in one and our web app in the other one.
Workflow goes like this
- Design and setup things inside of Sketch — then save
- Drag drop that same .sketchfile onto our app
- You are now in Preview Mode
- Big fat chances are that you want to make some changes
- Do your changes and drag+drop again onto our Previewer App
- Do this million of times until you are happy with your work
Export to HTML5
- Go to the Download tab and yup you guessed it — download!
- It downloads the page you have visible as Bootstrap powered HTML5
- Do this for each and every page/artboard that you have in your Sketch2React enhanced .sketchfile
- Remember: once you have exported things to code there is no way of getting them into Sketch again. So make sure to do as much as you can/or need inside of Sketch before exporting to HTML
Let’s look at what else you can do in our Previewer app (web version)
- The tab React shows you the prototype React code for the very page you have created. This is exactly how you will export and download the React code when it’s ready.
There’s a good reason I’m writing (web version) everywhere. Read on dear reader…
And now a few words about the FUTURE ? ⚛️
We are working on a desktop application that will be exclusive to our (future) paying Pro plan users. No worries, the pricing will be very economic, we really want as many as possible to afford this. We understand you already are paying for Sketch and many other services.
That’s why HTML5 export will always be free and you pay zero dollares for the framework and our layout plugin.
Again, we want as many as possible to be able to learn and use our design to code framework. The Pro plan will be for folks who really care a lot about getting this workflow to React. Also the Mac Desktop app has something totally awesome called Hot Reload. Every time you save in Sketch it will auto-reload in our Previewer App (desktop)?. And the desktop app also works offline and is super super fast.
Why do this?
We will not be able to sustain development of Sketch2React without some kind of revenue, specially since we do have some costs attached to this. We’ll update you guys when a plan is in place.
In the mean time: Happy makings!