Building Figma’s Widget Code Generator

Abstract

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We created Widget Code Generator that allows you go to from Design -> Widget interface in a button click. We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.