We now support Sketch Shared Libraries and MaterialUI CSS 🚀👇🎆

Juan Maguid
Jun 7, 2018 · 3 min read

🎁 Latest version & docs

Introducing Sketch2React — Real code components inside of Sketch

The biggest difference between this and other prototyping tools is that you **design with real code**. That gives you high fidelity code right from inside Sketch.

We love you Chris Pratt you seem like a great guy

What is this?

Go from .sketchfiles (via our framework) to code really fast!

Sketch2React is:

  • Framework, code app, plugin
  • Component HTML5 Export
  • Component Vanilla React + React Export

In fact, we’re the only free Sketch App to code framework that exist ✅

Quick Overview

  • Design with code snippets that’re easy to learn! It’s more like Markdown
  • Fully responsive
  • Zero plugins, works natively within Sketch app
  • Visual way of learning more about code
  • Treat the layers view in Sketch as a very simple code editor
  • Use CSS plugins
  • Offline mode & Hot reload
  • Build entire static websites directly from inside of Sketch 🤯
  • Export to HTML package that includes .html, css and all relevant files
  • Export to React code & components

Software requirements

  • Sketch 56–57.1
  • Sketch2React Code App
  • OSX Mojave

Why did we build this?

Both Fredrik and me are very curious by nature, and we are totally obsessed with trying to work smarter and smarter each and everyday. We where thinking “oookey so Juan designs stuff inside of Sketch and then sends it over to Fredrik via Zeplin and then Fredrik codes it with React”. Pretty standard design+development procedure anno 2018 wouldn’t you say? Yup.
Sooooo wait. What if we could design and build stuff directly inside of Sketch, already setting up things like columns, margins, paddings, media queires etc etc? And use Bootstrap in the background so we get the famous grid and responsiveness? Plus all of those sweet components. Boom 💥

Serendipity

In the process of building a true Sketch to React workflow we discovered several amazing “side effects”. We wanted to be able to view our design+code prototypes on our phones so we needed to be able to download .html files of each artboard rendered through our React app. But wait! The fonts look odd. Yeah we need to be able to have some kind of {externalasset.css} thingie for Google Fonts (or others). Check. Woooooow wait a minute. What else is a font but also a icon? Icon fonts of course!
Hold on. WTF I can build simple websites now straight out of Sketch? Yes you can. Here’s a vanilla demo, 100% done inside of Sketch. 💎😋👍

Another cool thing. Turns out building true HTML prototypes within Sketch that you can put on your own secure servers is perfect for user testing. Just hook up Hotjar and you’re good to go.

Couple of good resources

Design + Sketch

The best collection of articles, tips, tutorials, and…

Juan Maguid

Written by

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

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Juan Maguid

Written by

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

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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