Follow these instructions to the point and you’ll be exporting to React code and components in super little time. We promise 👍
Open up Sketch2React app.
Go to File, Link Sketch-file (⌘L) or just drag and drop the Sketch file
Your Sketch file needs to have our markup rules (components etc)
Before anything can be exported to code, you need to add each artboard/page to our export bundle. You do that by visiting each page in your design, it adds itself automagically to our bundle after each page load. Neat right?
Press Download icon. If everything worked when activating you should see React below HTML.
Press React and save the .zip somewhere locally on your computer.
Don’t save to Dropbox, OneDrive or Google Drive. Or use at your own risk of being really annoyed 😅
Once you begin installing all the packages that are included in our React export, these services will most likely hickup. Or send you automated emails complaining you have to many files 😸
This is because we use Create React App (among other things) and it contains an amazingly amount of really small files. Size-wise we’re talking about approx 220MB of downloaded packages.
iCloud seems to be working fine with these many small files, no crash so far and the syncing seems to be working great between computers linked to the same Apple ID.
🏎️ Cool, now let’s move on to the really exciting part…
Now comes a couple of steps that first can seem very odd and very unfamiliar. Specially if you have never installed thingies via the Terminal. We have streamlined this as much as we can but hey, this is a real design to code environment, you can’t cheat your way through this 😸
For our React export to work you first need to install Node.js.
Node.js is an open source server environment
Node.js is free
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
Download the latest build from here
First of all, make sure you have admin rights to your computer or nothing of the below things will ever work.
Open Terminal app. You know that weird little app you maybe have been in contact with when doing funky stuff to your Mac 😆 It’s actually really friendly, don’t be afraid. But weird yes.
Write cd and do a blank space
Go to your dl Sketch2React .zip, unzip and drag drop the entire folder onto your Terminal window. Drop it precisely after the words cd + your blank space. It should look something like this cd /users/
Hit Enter ↩︎
Write npm install and hit enter ↩︎
Since you have entered the correct cd installation of all required packages should begin
Write npm start and hit enter ↩︎
It will take up to one minute and then you will see this message in the Terminal will open up your default browser with localhost:3000
Done! Now continue with your development outside of Sketch, do all changes directly in code.
If the server is running, press Control+C to stop it
Write npm run build and hit enter ↩︎
It will create a optimized build of your entire project. It takes a bit of time, just chill, stand up, look out your window or something 😄
By default, Create React App produces a build assuming your app is hosted at the server root.
Open up package.json and enter this very path below version:
First of all, make sure you visit each and every page within our code app that you want to be included in your Export Bundle. Wait for the Your Artboard was added to the export bundle message to appear, it will take a few seconds per artboard, we're just making sure all the good stuff gets included 😺
Go to the Side Bar in our app and click Download
Save to great place
You know have a .zip file with all of your files, assets neatly organized in separate folders