Update to new version

When a new Stoybook version is detected, the plugin will display an informational message asking you to update.

Update button indicating a new Storybook version was detected

The status “Outdated” indicates that the component was imported from an older version and therefore could be outdated.

Check for updates

There are various situations when we check for updates:

  • Each time the plugin is opened.
  • When new components are being imported.
  • When previously imported components need to be loaded again (e.g. as a part of Re‑process or Report actions).

Update

After you click to update we automatically start generating all previously configured variants of all components using the latest Storybook version.

Components being re-generated with the new Storybook

This process might take quite some time, especially if you imported many components and variants. However, as it is happening in the background on our servers, there is no need to keep the plugin open the whole time and you can continue working elsewhere in Figma or even close Figma and return to it later.

Sync with canvas

When the process is finished for a certain component you will see “Unsynced” status which means your Figma canvas contains older variants. You can sync newly generated variants of this component with the canvas by clicking the button on the right side of the status.

Button to synchonize new component version in the canvas

Only syncing selected components results in a situation where your Figma canvas might contain new versions of some components and older versions of the others. This is normal and gives your team the flexibility to update your design system in Figma whenever it suits you best.

Some components can remain 'Unsynced' as each component is updated to canvas on manual operation only