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
869 stars 73 forks source link

Figma file is not loaded properly #243

Open vladyslavgeyna opened 2 months ago

vladyslavgeyna commented 2 months ago

Affected design types

Describe the bug

When using the figspec, Figma file is not loaded properly: image

I can hover on Figma file items and see their styles, but they still are not visible.

Am I doing something wrong? I'm not sure that the issue is related to accessToken, since I can see styles. BTW, type Figma works well with the same url.

Environment

Affected versions

8.0.2

Storybook versions

8.1.8

pocka commented 2 months ago

Not able to reproduce with my draft file on localhost.

Please check the response of https://api.figma.com/v1/images/<fileKey> on browser's network panel. I suspect the response is JSON object with non-empty err field, which (should) describes what's going on, and images field is an empty object.

caiangums commented 6 days ago

Hey @pocka I'm having a similar issue with the URL from Figma and my bet is: that Figma changed something internally and still didn't updated the REGEXP offered at their website which is pretty much the same one you are using at this file.

My URL from Figma offered to the storybook is something like the one mentioned at #244 (and similar to #242)

https://www.figma.com/design/t8x8Z4dRrFG5WjZ2WWVisd/space?node-id=687-19311&t=p3wjagyQydsnxEu0-4

And I noticed that other URLs I have (and is still working) are in this format:

https://www.figma.com/file/<file-key-name>/<file-name>?<search-params>

So while questioning myself on what's essential to render considering that I just wanted to see the Figma file and opening instead of having a broken experience I started to remove query-params and changed the design file type to just file. Using the same URL from before, it would look like this:

https://www.figma.com/file/t8x8Z4dRrFG5WjZ2WWVisd/space?node-id=687-19311

With this change, it worked for my case. The design file-type seems to be broken for some reason inside Figma or the integration is broken by something specific. I'm not 100% sure why it works but it is a guess and a possible partial solution.

Thanks for your plugin! :pray:

pocka commented 6 days ago

Again, please check the response of https://api.figma.com/v1/images/<fileKey> on browser's network panel.

It's possible some their/our changes broke handling for design URLs. However, presence of the t query parameters should not affect our parsing logic, as we fetch Node ID via URLSearchParams API: https://github.com/storybookjs/addon-designs/blob/8e63a56560fe49ebc39fa59dc3028c2960f87d71/packages/storybook-addon-designs/src/manager/components/Figspec.tsx#L102

If a URL does not match to our regular expression, Figspec embed displays something like "Failed to load Figma file \ is not a valid Figma URL."