We now support Sketch Shared Libraries and MaterialUI CSS 🚀👇🎆
🎁 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.
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.
