Generating Design Elements Directly from Code

Illustration for React-sketch.app

React-sketch.app is a new, open source library from the team at Airbnb Design that allows templates and working assets from the company’s extensive design system to be generated directly from code. It obviates the need for a design system to maintain its constituent elements both as “drawn” objects in a layout app and as a snippet of code in a repo, thereby eliminating the inevitable inconsistencies that arise as the system evolves. In react-sketch.app, a given button, say, is created by React components, so that the designer is ostensibly working with the exact button itself.

It’s a fascinating project that minimizes the distance between design and code and it could have some interesting long-term implications for how design is practiced—at least for the production aspect of large scale design operations. Read the announcement at airbnb.design, fancifully titled “Painting with Code.”

+