Support multiple figma urls in a story

[lazreg87]

Is your feature request related to a problem? Please describe.
Would be nice to be able to support multiple figma design urls in a single story, since Figma lets you link to specific nodes in the design.

Example usecase; be able to link to separate desktop and mobile design for one story

Describe the solution you'd like
Support multiple figma design urls per story

Describe alternatives you've considered
I could split the story into desktop and mobile, but since you can define viewports, this seems like overkill.

Design types

• figma
• experimental-figspec
• link
• image
• iframe

Additional context
Add any other context or screenshots about the feature request here.

[pocka]

You can embed more than one design assets (not only Figma, also links, images, and iframes) into one story by passing an array of objects. (Example)

If you do so, I'd recommend you to set a tab name via the name property.

export const myStory = () => <MyComponent />

myStory.parameters = {
  design: [
    {
      name: 'Mobile',
      type: 'figma',
      url:
        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
    },
    {
      name: 'Desktop',
      type: 'figma',
      url:
        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
    },
  ],
}

[sauldeleon]

Hi! I don't know if I should reopen this. Im having a problem when including multiple experimental-figspec designs.

Only the first one in the array list is loading properly. The second one seems like blocked and cant even scroll in the figma iframe

Also, when adding one figspec and one normal figma, it works correctly

[pocka]

@sauldeleon
Can you open a new issue? It seems specific to figspec embed.

[sauldeleon]

Sure! here you go!
#122