React Sketch.app — set up tutorial

Render React components to Sketch

If you like React and have some passion for design and design systems you’ll love what Airbnb’s Jon Gold did with their React design system and integrating it with Sketch.

Unicorn effect

This is a beautiful example of how technology and design are blending to to create one re-usable design system used by your production team.

Managing a design systems is quite a tough job at times frustrating and definitely time consuming. You’ll find that designers and developers often have a very different idea of how your components should work, behave or even look like.

You will often see ‘versions’ of your beautifully designed component scattered across the website.

There’s a need for constant collaboration which if not perfected can make your design system a ticking bomb of bugs, usability and accessibility issues, not mentioning hours and hours of user acceptance testing sessions and frustrating lack of consistency between designs and the finished piece of work.

Being able to design with React components removes all that frustration and creates seamless design experience and user journeys across your product. When your production components change, your design gets automatically updated, your react components become the only source of truth.

So you are always designing with the true and most up to date components.

Using Symbols in sketch is great and works in a very simmiliar way enabling easy global updates across all your projects but it only works one way and there’s no real benefit for developers. There’s of course a number of plugins that help developers extract some values from your designs like font sizes, colours, borders etc. but they are not perfect and often ‘buggy’.

The big picture

Render everywhere…

To Jon, Sketch is just one of the many possible render targets. According to Jon we should be able to render components anywhere.

It’s not we just render things to Sketch. It’s like we can use cross-platform components and render them everywhere and build whatever input/output things we want for them.

I don’t know if you’ve seen the project we’ve done recently. It takes hand-drawn design and use AI to render it.

But enough from me, hear it from Jon:

Get it running on your machine

1. Just open up your Sketch, you don’t need to do anything else…
2. Run few commands from your terminal:

git clone https://github.com/airbnb/react-sketchapp.gi
cd react-sketchapp/examples/basic-setup && npm install

Finally:

npm run render

This should open up the components in your Sketch, so navigate back to Sketch and you should see the following:

3. Now open up the cloned folder ‘react-sketchapp’ in your preferred IDE:

4. To be able to amend the Swatches component in the image above navigate to examples/basic-setup/src/my-command.js and play around with some of the values.

Now it’s time to brew some tea and code deep into the night…

Thanks for reading!