Bring in Storybook updates

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.

Review and update on the canvas

When the process is finished for a certain component you will see “Review and update” button which means your Figma canvas contains older variants and you can review the difference and update it on the canvas.

Review and update button for unsynced components

This button opens “Review and update” screen where you can just update it on the canvas or first review visual difference between old and new version to verify if the Storybook update went as planned.

Review and update screen

Click on “Review changes visually” to open the comparison view.

Visual review is optional. You can just “Update X variants” if you want to sync new version with the canvas right away.

Review changes visually

Some variants might have no visual differences and therefore are not shown here by default, but you can always show all variants by switching off the “Show changed only” toggle. The comparison view supports “Combined” mode which is useful to overlap two versions and to compare larger components.

Click on “Update X variants” to sync new version with 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 on the canvas manually

Update all

If you want to update all components at once, there is “Update all” button.

Update all button

Click it to sync all components with the canvas.

It’s always possible to revert the canvas update using standard Figma “Redo” functionality. If you review the canvas after the update and find something that didn’t go as planned, you can revert everything and “Review and update” each component individually.

Using multiple files in Figma?

  1. Update whichever file you currently use as a library
  2. Accept changes in the current working file.

Please refer to this documentation about Figma library updates