React Sketch

React provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers, it’s basically an open-source library that allows you to write React components that render to Sketch documents. 

Because React uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine. 

React, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of 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.

Why building it?

Airbnb has a large team of designers and engineers. They want to encourage designers to be using their design system and streamline the communication between designers and engineers.

We have a design system at Airbnb. The system has probably 200+ components. We have 100 designers and probably almost 1000 engineers. The current workflow is: the design system team creates the system. And we have a production design team who creates and updates the (Sketch) templates for all the design system files. Most of the time we’d love people to be using the system. That’s one goal.

Another goal is that we want absolute minimum of the time between design and engineering. There’s potentially back-and-forth of annotating specs, doing redlines and all that stuff. With any friction like that, times by the number of designers and engineers, the relationship becomes not scalable.

However, the central artifacts in this workflow, the design system templates, tend to get out of sync with implementations very quickly, which make them not as useful as they should be.

(In order to create the design system templates, ) We played around smart symbols in Sketch. But essentially it’s a big Sketch file stored on Dropbox. That has the tendency of getting out of sync quite like how the code is. We have iOS, Android, Web and React Native — all different codebases. It’s very possible that the engineering implementations are out of sync with themselves. There is a huge possibility that the design system templates get out of sync with any of the implementations. There are so many chances of failure.

With Sketch files, there’s not really much you can do.