Figma file is not loaded properly

[vladyslavgeyna]

Affected design types

• figma
• figspec
• link
• image
• iframe

Describe the bug

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

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

• Chrome / Chromium / Chromium based browsers
• Firefox
• macOS Safari
• iOS Safari
• Samsung Internet
• Other

Affected versions

8.0.2

Storybook versions

8.1.8

[pocka]

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]

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! 🙏

[pocka]

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:

addon-designs/packages/storybook-addon-designs/src/manager/components/Figspec.tsx

Line 102 in 8e63a56

const nodeId = url.searchParams.get("node-id");

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