Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for the updated Figma embed #239

Open
3 of 11 tasks
spring1975 opened this issue May 16, 2024 · 2 comments · May be fixed by #240
Open
3 of 11 tasks

Support for the updated Figma embed #239

spring1975 opened this issue May 16, 2024 · 2 comments · May be fixed by #240
Labels
category: feature New feature or request

Comments

@spring1975
Copy link

Affected design types

  • figma
  • 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?

  1. Right-clicking on a figma variant, select Copy as > Copy link to selection. Note, the copied URL starts with
    https://www.figma.com/design/...
  2. Entering this URL into a figma or figspec parameters:url definition of a story
  3. 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

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

Affected versions

8.0.1

Storybook versions

8.0.4
@spring1975 spring1975 added the category: bug Something isn't working label May 16, 2024
@rel1ght
Copy link

rel1ght commented May 16, 2024 •
edited

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

@pocka pocka added category: feature New feature or request and removed category: bug Something isn't working labels May 17, 2024
@pocka pocka changed the title Figma using "design" instead of "file" as part of their URLs Support for the updated Figma embed May 17, 2024
pocka added a commit that referenced this issue May 17, 2024
@pocka
Support new Figma share URL
34721f5 
<#239>

Figma changed URL structure for the share URL from "/file/..." to
"/<anything>/...". This patch updates the URL checking regexp according
to their updated embed document.

close #239
@pocka pocka linked a pull request May 17, 2024 that will close this issue
Open
@spring1975
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
category: feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Support for the new Figma share URL storybookjs/addon-designs
3 participants
@spring1975 @pocka @rel1ght