Skip to content

Getting started with Sketch2React

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. ?

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 Team Sketch2React

We’re a small team consisting of Fredrik Ward (developer) and Juan Maguid (designer).

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 ? ? 

In Sketch2React 2020 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

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

Leave a Reply

Your email address will not be published. Required fields are marked *