Support for the updated Figma embed

spring1975 commented 3 months ago

Affected design types

[X] figma
[X] figspec
[ ] link
[ ] image
[ ] iframe

Describe the bug

I don't know if this is a very recent change or not. I've just now starting using the figma integration with storybook. I know figma has been going through lots of changes regarding developer mode, making it an additional cost and all... Maybe this is new URL is part of those recent changes.

Right-clicking on a figma variant, select Copy as > Copy link to selection, it gives you a URL that starts with https://www.figma.com/design/...

Entering this into the figma or figspec parameters, the design panel then displays an error with the URL and is not a valid Figma URL

It appears figma is still supporting the file path, it just forwards you to a design path in the end. So my workaround so far has been to use the Copy link to selection and simply swap out design with file.

Would be nice to update the regex figmaURLPattern in packages/storybook-addon-designs/src/manager/components/Figma.tsx to include design

How to reproduce the bug?

Right-clicking on a figma variant, select Copy as > Copy link to selection. Note, the copied URL starts with https://www.figma.com/design/...
Entering this URL into a figma or figspec parameters:url definition of a story
The design panel then displays an error with the URL and is not a valid Figma URL

Expected behaviour

Should display figma without an error for a valid url

Environment

[X] Chrome / Chromium / Chromium based browsers
[ ] Firefox
[ ] macOS Safari
[ ] iOS Safari
[ ] Samsung Internet
[ ] Other

Affected versions

8.0.1

Storybook versions

8.0.4

rel1ght commented 3 months ago

I ran into this today while using Firefox. According to this thread on the Figma Discord server,, it was an intentional change to url structure slated for April 1st.

There's also a Figma community thread where someone reported the same kind of issue a few days ago, which leads me to believe something changed more recently than April 1st, or that the change is being progressively rolled out.

Here's a snippet of the new url structure, which is covered in more detail in the Figma Embed docs :

    https://www.figma.com/board/:file_key/:file_name → FigJam files
    https://www.figma.com/design/:file_key/:file_name → Figma Design files, opened in design mode
    https://www.figma.com/design/:file_key/:file_name?m=dev → Figma Design files, opened in Dev Mode
    https://www.figma.com/:file_type/:file_key/:file_name → in future, we might add new file types

spring1975 commented 3 months ago

Thanks for hopping on this. Unexpected change is always around the corner...

brunopintoseixas commented 2 months ago

Is there an estimation till this new link issue is solved? I tried to change the figma link from 'design' to 'file' but it only works in type 'figma' and i wanted 'figspec'.

wiedikerli commented 2 months ago

As workaround you can use the iframe embed url.

{
    type: 'figma',
    url: 'https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/design/....'
}

storybookjs / addon-designs