An intro to building plugins for Figma with create-figma-plugin
After the launch of the Reciprocal.dev alpha late last year we took a step back and thought about the tools our potential customers would be using and how we could bring our visualisation techniques to where our users would be needing them most.
We started with a Miro plugin because we’d seen a lot of teams (including ones we were part of) using that tool to visualise and discuss user journeys, but after investing a month of development into building a Miro plugin I was really aware of how limiting the Miro SDK and API would be in delivering something valuable.
Instead of running ahead with the Miro plugin we thought about how people use Miro and realised that Miro isn’t really a source of truth, instead it’s where the ideation and discussion happen before the outcome is captured in a source of truth the team uses.
Figma is a platform we’d already been thinking of building a plugin for as we used it as a source of truth in our day jobs where a design agency would provide mockups for user stories ready for the team to implement.
A quick read of the Figma development documentation reassured me that I’d be facing a better development experience than Miro’s so we decided to invest some time in exploring that approach.
How Figma plugins work
Plugins for Figma are split into two contexts; a UI context and a ‘main’ context.
The UI context is where the rendering and state management of the plugin UI is carried out. This context is run in an iframe so doesn’t have access to the surrounding Figma document and has limits on some of the APIs you might expect to be available in an iframe such as local storage.
The main context is where you can interact with the Figma canvas via the
figma window object, save and read values from storage as well as where you initialise your plugin’s UI context.
Communication between the two contexts is handled via Figma’s wrapped version of postMessage so that the UI iframe can send and receive messages from the…