react-sketchapp

React 15 era. I was deep down the functional-programming rabbit-hole. Everything made sense as pure functions and immutable data. Watching designers manually drag rectangles, copy layers, update tokens by hand—it felt like unnecessary suffering.

Couldn't get buy-in to build new design tools in a busy org. So I hacked the tool they were already using.

react-sketchapp: a custom React renderer that drew components directly into Sketch files. Under the hood—serious conjuring with React's internals, implementing our own layout system with Yoga. But the result was elegant. Design became code. JSX instead of rectangles.

Our Production Design team had been drowning. Untold hours maintaining design system template files, manually syncing every time a component changed. Not scaling. With react-sketchapp, we just rendered actual components into design files. One source of truth. Auto-synced.

We open-sourced it and watched it take off. Over 10,000 stars on GitHub. Teams at other companies started using it to automate their own design system production and build custom in-house design tools. To this day it remains one of Airbnb's most popular open-source projects.

For me, there was another angle. I needed synthetic training data for the nascent AI models I was training. react-sketchapp became the fastest way to generate thousands of UI variations—all using our design system, all in sync with Canon's architecture. Same tool that solved today's design ops problem also set up tomorrow's AI experiments.

Sometimes the best way forward is to build something genuinely useful that also happens to open doors you'll need later.