It has never been this easy to work better together

Juan Maguid
Design + Sketch
Published in
4 min readMar 9, 2019

--

These are exciting times to be alive in friends! With the free release of Sketch2React v1 we are giving everyone a fighting chance to really try out our version of the future and how we see collaboration going forward.

First a recap if you’re not 100% sure what you can do with our free design to code component framework:

What can you do with Sketch2React?

  • Design real code components without ever leaving Sketch
  • Design with real code constraints
  • Our Code App transforms these code components in real-time to real workable code
  • You export code components to HTML5, React or Vanilla React

Here’s a brand new Beginner Tutorial

Here’s a brand new recap vid

What is Release Candidate 1?

It’s version 1 of Sketch2React, so basically we’re not in beta anymore — woo-pi-doooo! 😸👍

Our first plan was that when we finally reached 1.0, we would implement some kind of paid subscription plan for our Pro features. We’re still are, but not right now. So you get to play around with everything, totally for free, until we release version 2 of Sketch2React. We do this not only because we are super great guys, but also because we want to:

  • Let you guys play around with all of our code export options
  • Give you time, the only resource we can freely give you right now, to learn this, and see how it fits to your current work environment
  • Gather feedback on what to improve

What’s new in V1?

  • Export to HTML5, Vanilla React or React (Pro)
  • Public Preview (Pro) lets you start a temporary web server right from our app, which in practice means you can watch your designs in realtime on any browser.
  • Pages now add themselves automagically to our export bundle after loading/visiting them once
  • Register & unregister license from your computer

How long will this be free?

As long as we haven’t released version 2, V1 will be free, all bells and whistles. At the very least a couple of months. We’re doing some major improvements on version 2 and it will take a while 😄

Sneak peak of the future

Here’s a sneak peak (very early version) of some things that are coming in v2. We have something new called Component Inspector, pretty self-explaining 😄 👍

Also we’re bringing back something that we had in our early web app alpha, Code View.

Windows app

One other thing we have picked up during our many talks, is that many developers work on Windows systems. Since our Code App is built with React and Electron (nothing Mac-specific) we’re working on a version of it that will also work on Windows. 🎆

Sketch is still Mac-only but setup your .sketchfile on Dropbox (or any other cloud based app) and your PC-only developer can link to that same file and do all the exporting, snippet-picking themselves, in real-time. Connect a video chat and you get some next level collaboration right there. Pretty neat. 😄

Focus on the export

From the very start our focus has been very much how to make this as approachable as possible to designers working in Sketch. Made sense. One of our main USP is that you never leave Sketch, our code app works in the background, you do everything up until export directly in Sketch. A total plugin free design to code environment. Which is awesome of course.

One of the main questions we get when we do our presentations about Sketch2React around companies in Stockholm is: ”Cool but how does the code export look?”

That’s why we built Advanced Export in the first place. That’s why we both have a kick-ass React export with everything and a Vanilla React version with just one flavor for maximum flexibility for your developer, or yourself.

Some of your developers will not even want React, they can pick all your styling from our HTML5 export, that is free and will forever be free.

That is also why we’re building something like Component Inspector, to make the transition between design and code even faster than ever before. Talking about components … 😸 🌵

More components are coming!

Components are the core of any workable design system and to accommodate this never ending need, we are taking necessary steps to ensure we stay relevant for years to come. First of all we’re going to release a bunch of new ones in v2!

We are re-writing the core rendering engine and this makes it much easier than ever before for us to add them into Sketch.

Should designers code?

This is a question we have begun asking when we present Sketch2React.

The voting below is a snap from a room mixed with designers, developers and project managers.

Interestingly it depends on the output which gives us even more inspiration for the future.

Go ahead, you can vote yourself, it’s open to the public.

That’s it friends, until next time, have a great one!

“Hej hopp” as we say in Sweden

//Juan from Team Sketch2React

--

--

Juan Maguid
Design + Sketch

Creative Technologist. Co-founder of Team Sketch2React.