Getting started with Sketch2React

Designforventures.co
Oct 24 · 4 min read

We know how it can be when learning something new. Overwhelming. Where to start?

Fear not — we’re here to help! We have introduced Sketch2React to many people during our approx 20 months of existence. Everything here is based on insights & feedback from those sessions.

What is Sketch2React?

Sketch2React is a tool and a framework that lets you build React powered websites & components straight from inside Sketch. Without plugins and only using built-in tools in Sketch. 👍🤖

In that we are totally unique — there is no single tool out there that does this. You never leave Sketch and you don’t rely on third party plugins that (sometimes) causes conflicts. 💪

About pre-releases/early access

1.5 is 100% free. You get it by signing up on our start page. 1.6+ pre-release is a payed upgrade which comes with all kinds of nice things, including the amazing ability to work with Sketch Shared Libraries, Sketch Cloud Docs and many many other things. You can read all about it here.

The pre-release is the next sharp version of both our framework and code app. You pay for the exclusive right to be ahead of everyone else (the ones that settle for waiting a few months) before this very same release becomes available for free. Maybe we should call this early access instead? Well that’s a thought 😄 💭

What you also get

By supporting us economically you get a big fat discount the next time we bundle things together and call it something truly creative like ehm DLC#3.

Mac only

Sketch2React is at the moment a Mac-only design to code development environment. Of course, your exported code can be used anywhere so technically you can also work together with developers using Windows. But all the building and designing is done inside of Sketch app.

You can guess by the amount of stickers who does what 😄💪

About us

It’s a side project between a senior developer (Fredrik Ward) and a senior designer (Juan Maguid). We’re based in Stockholm, Sweden.

In Sketch app you:

ProTip: Start by using our very simple pre-made S2R Sketch Shared Library to get a great start. To restyle them just unlink from library and go wild 😺 👍 Important! Using Sketch Shared Libraries is currently only available in 1.6+ which is a payed purchase. Btw, we still have a 25% discount for all our Medium readers 👓

In Sketch2React Code app you:

  • View in real-time what you are doing in Sketch
  • Export to code (React or HTML)
  • After export you get a React project based on Create React App or a HTML5 project.
Sceptic? 👍Find out how our code export looks 🤖

Install all of these first

  • Sketch app version 56.3–59 (Catalina requires v59 of Sketch)
  • Sketch2React Code App 1.5+ or 1.6+
  • Node.js & npm
  • Code editor, we prefer the awesome free Visual Studio Code

That’s it! You are now ready to start building and designing React websites directly inside of Sketch!

What to do next?

All the best 🎧
Juan, Team Sketch2React

Sketch2React

The best source of Sketch2React related articles on Medium

Designforventures.co

Written by

Tools and tutorials for the people! Co-founder of Sketch2React.io

Sketch2React

The best source of Sketch2React related articles on Medium

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