Published in


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

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.

Alpha 0.55 is out and has (among other things) real form fields that you can customize the look of directly inside of Sketch. Yes it’s true!

All the best, Sketch2React Team, Fredrik & Juan




The best source of Sketch2React & Stratos Tokens related articles on Earth 🌎

Recommended from Medium

5 UI and UX Tips For Mobile Form Design Best Practices

Final Project — Wipe Out the Virus!

Bad UX Roundup #6 — Nursing a Juicero hangover with more crap design.

What’s in my Etsy Cart Right Now

In situ Informants Exploring an Emotional Mobile Messaging System

Looks easy, but is it? (Flap Flap..)

8 tips towards a job as a Service Designer

Understanding Product Design from the rebranded Oxford Cabin Biscuit

image of the new package of the oxford cabin biscuit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Maguid

Juan Maguid

Co-founder of Team Sketch2React. Designer that wants to make your maker lives easier😺👍

More from Medium

UX London speaker updates

Finding pixel perfection in technical product design

An illustration showing a bee in the centre of a hive represented as curly code brackets. The bee has cursor arrows as wings.

The ‘Junior Product Designer’ Dilemma

What to do when your team’s enthusiasm vanishes

Team outdoors jumps for joy.