Generating design elements from code with React Sketch.app

Airbnb’s design team released a new open source library for Sketch based on React. It allows to generate templates, components and assets directly from code instead of drawing them in Sketch. This eliminates the need to maintain their design language system across Sketch files for designers and Github repos for developers, so that everyone uses the exact same elements from a single source of truth. In the past we’ve seen many plugins try to generate code from Sketch files in order to bridge the gap between design and development, but the React Sketch.app is doing the opposite.

Once you dig a little deeper you start to see the many advantages of this new approach, especially for big international platforms like Airbnb. As their design system grows, new components can require changes that include colour, typography or spacing. Imagine having to redraw things like that in Sketch every single time to see if it’ll work across thousands of devices and hundreds of languages. You can use code to do the heavy lifting for you and generate content on many artboards with different sizes instead.
The library also makes designing with data really easy by allowing you to use traditional APIs and GraphQL endpoints. The same goes for internationalisation if you want to see how titles or button labels fit across your design system.

Even though I’m not too familiar with React I’m very excited to explore the possibilities that come with this open source library. It further reduces the gap between design and development in a radical way. Head over to airnbnb.design to read more about “Painting with Code” where Jon Gold explains the framework in more detail.