search

storybookjs / addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
https://storybookjs.github.io/addon-designs
MIT License
868 stars 73 forks source link

Notification of Figma changes #71

Open MoistCode opened 3 years ago

MoistCode commented 3 years ago

Is there a way to notify Storybook that there were changes to the Figma design for a component since it was last visited?

pocka commented 3 years ago

Currently, no.

But I think it's super useful if we can solve that "oh you changed the design spec silently!?" problem with this addon :stuck_out_tongue_closed_eyes:

It's hard or impossible to detect differences from the last time visited because the Figma preview is sandboxed (I mean, iframe). The idea I came up with to overcome this limitation, is saving a rendered image fetched via API or a hash of it with CLI then compare it with the previous one (like image snapshot testing).

  1. Developer implements component
  2. Developer runs the snapshot command
  3. Designer updates the design
  4. Developer runs the snapshot command, changes detected

What do you think? Will that solve your problem? If anyone has ideas, please feel free to comment on here!

MoistCode commented 3 years ago

Using a hash to compare is a great idea and might be one that I entertain in the future when time permits. There were two other approaches that are floating up in the air for me. Mabl has visual testing capabilities which can be used and Chromatic seems like it might be worth it to look into integrating with this add-on. I'll post on here as I come across anymore ideas and/or discoveries.