Overlay is a design-to-code tool we’ve been working on to create production-ready web components from design tools. In short, it’s a plugin that compiles design data (as JSON) into code.

The Overlay plugin has been built for both Sketch and Figma, with just a single codebase. In this article, we will show how our setup works, so you can learn how to make plugins that support multiple design tools (Sketch, Figma, etc), rather than just the one.

A pinch of context …

Today, designers have many options: Sketch, Figma, Adobe XD, Framer, etc… All these great products are being extended with third-party plugins. The open nature of the plugins system means that anyone can identify a need, write a plugin, and share it with the community. That’s what we started two years ago with this design integration problem.

Starting the plugin in Sketch

We started historically by creating a Sketch plugin, but very soon people asked us to build other design tool integrations. We decided to follow the designers trend by creating a Figma plugin.

Since Overlay was originally a Sketch plugin (built with the Sketch-native/web approach),only a few code parts are tied to the design tool. The majority of our plugin is handled by our own React application. To know more about this approach, see this article.

#figma #design #react #sketch #development #react native