Sketch2React — How it works
Sometimes you have very little time to explain a lot of complex stuff. It’s then that you need these type of articles.
💎 What better way to show how Sketch2React works than using the awesome GIF technology? Are you ready to give your .sketchfiles super powers? 🧠
Btw these are heavily compressed for faster loading times. 🚀Okey let’s start, you are very busy we know 🙂
🤖 Step 1 — Use our plugin
First design your stuff. Then you use our plugin to create folders containing things like rows, columns, paddings and margins.
🎓Important! The page (in Sketch) needs to be named Start here and the first artboard needs to be named Start or our previewer app will not read your .sketchfile correctly.
🖐 Step 2 — Moving and naming stuff
This step is the most important one. It’s now that you begin giving your Sketch design file the super power of Bootstrap 4 and React without even leaving the document. You are enhancing your design with real code components and a amazing responsive grid (we love you Bootstrap 4).
When you are happy with how things look you will need to start moving them inside the proper folder and applying correct naming of layers. Check our Components or Cheat Sheet. And please study our demo files, they releveal things that can be hard to explain with words. Or even GIFs 😅🎓
🤖 Step 3 — Drag and drop to our magical Previewer App
👨🏻💻Now comes the really fun part, dragging and dropping your .sketchfile onto our magical Previewer App. If you have done your homework of Step 2, you will see your design file beautifully rendered and fully responsive based on what you have set up.
✈️ Step 4 — Export as HTML
If you are ready to take your prototype even further you can export each artboard page as separate HTML files. Or maybe you just want to put it on your own server and test it on different devices.
💪 Step 5 — Open your HTML files
You can use the excellent Solis for previewing your exported HTML files or you can just drag+drop them onto any browser. And you can use excellent web editors like RapidWeaver to easily upload them to your own websites. Or even just use Transmit and drag+drop the .html files, just remember to rename the first one index.html or it will not work properly if you send your client a link to say https://mysupercompany.io/latestprototype/
Excellent work! We hope you now have a better understanding of how Sketch2React works, as always if in confusion just go to our website were we have stuff to read and stuff to watch.
All the best, Sketch2React Team, Fredrik & Juan
