Bring in story updates

When a new version of your stories 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 version of your stories.

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 component, you will see the “Review and update” button. This means your Figma canvas contains older variants that you can review the differences for to update it on the canvas.

Review and update button for unsynced components

This button opens the “Review and update” screen where you can simply update it on the canvas or first review visual differences between the old and new versions to verify if the story 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 the new version with your Figma 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 the new version with your Figma 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 an “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 “undo” 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