building a plugin system for the web

submited by

Style Pass

2024-05-14 16:30:09

Figma is a design tool that has become the industry standard, similar to how Photoshop became the defacto for photo editing. When everyone uses one tool, it only follows that there will be functionality that different groups of people need that isn’t immediately supported. To bridge the gap in functionality, a plugin system is the go-to solution for letting people extend a system how they see fit. Figma has a great set of blog posts on how they implemented their plugin system that is certainly worth reading, not just if you intend to build your own but also if you want to see how to reason about building a feature from first principles.

The posts are great at discussing the technical details, but there are a number of different technologies being discussed that can be confusing to conceptualize. This is a great opportunity to explain some security concepts visually with sketches!

Let’s say a developer wants to build a plugin called “Catz” that inserts a random cat picture into a Figma file. The developer needs to write code that can update the file. Since the Figma app runs in a web browser, the code could just be Javascript, and it runs on figma.com.