Airbnb’s new open source library lets you design with React and render to Sketch

Today, Airbnb’s design team open sourced its internal library for writing React components that easily render directly to Sketch. Instead of trying to get Sketch to export to code, the Airbnb team spent its time on the opposite — putting the paintbrush in the hands of the engineer.

Everyday engineers and designers have the luxury of operating without design systems, but large companies ignore them at their own peril. Airbnb, for one, has dumped a lot of resources into developing design components that can be applied across the company. But despite the requisite planning, Airbnb was still struggling to keep its iterative design system in sync with Sketch templates, holding up development.

If you’re not familiar with design systems, they’re the design DNA of any company that has multiple teams designing products. Imagine if the Airbnb team working on the listing page had no communication with the team working on the reviews feature. The result would be design amateur hour and it would be obvious that two teams didn’t communicate when building the app experience.

For any product, whether it be Airbnb or Facebook, it’s easy to see how a single new design rule could change the appearance of more things than you’d be able to reasonably keep track of. If Sketch renderings could be updated instantly with only modifications to code, that bottleneck can be lessened. This is where the React-Sketchapp library comes in.

In the GIF above, Airbnb is implementing its React-Sketchapp library to render variations of text in different languages, with the same design, using the Google Translate API. The benefit of rooting all this work in React is that its a paradigm that most engineers are already familiar with.

The library is available over on GitHub. Though it was intentioned as a tool for reducing overall design and development time at Airbnb, a lot more is possible when engineers can interact with designs the same way they typically interact with code.