Developer Mode

Developer Mode lets you connect to your local Storybook during development for fast iterations of your Figma components and Figma variant properties.

It’s particularly useful if you are embedding your Figma variant properties in your stories and want to iterate over the results in Figma quickly.


Developer Mode requires:

  • The agent must be installed and running on your computer.
  • Your local development Storybook must run on http://localhost:6006 (this is hardcoded today).

Developer mode’s Refresh canvas requires that you keep the Figma plugin open until the end of the process otherwise the updates will not be applied to the canvas.

How to use Developer Mode with Storybook

  1. First, run your Storybook locally on your device. This is usually done via the command npm run storybook, depending on how you’ve decided to configure it.

  2. Connect your local Storybook to the plugin via the agent.

Screenshot of the agent dashboard.
  1. Now, you want to experiment with a few changes to some components, and instantly see them reflected in your generated UI library in Figma. Or, you have “hardcoded” your Figma variant properties in your stories and want to iterate on them to also see the results directly in Figma. To do this, simply turn on Developer Mode via the ellipsis menu in the top right corner.
Screenshot of the menu to activate Developer mode.
  1. Once you’ve made your iterations in your local Storybook code, go back to Figma and you’ll see that the button next to your imported components will now say Refresh canvas. Click on it for whichever components you wish to update with your new code changes.
Screenshot of the plugin when Developer Mode is connected.
  1. Done! You’ll now see the changes you made to the local version of your Storybook reflected on your Figma canvas.

Since the generated UI library is synced to your production Storybook, any local iterations you push to Figma via Developer Mode will override this sync. To avoid losing the connection between Figma and your live Storybook, we recommend creating a different file for your experiments, or using Figma’s branching feature.