figma | embed Storybook stories

[culas]

evaluate and test the official integration of Storybook stories inside Figma: https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin

[hitschman]

what ChatGPT says about Figma URLs:
In Figma, you can indeed generate URLs to specific selections (objects) within your designs. The structure of the URL and its parameters in Figma typically follows this format:

https://www.figma.com/file/{file_key}/{file_name}?node-id={node_id}

Here's what each part represents:

• {file_key}: This is a unique identifier for the Figma file. It's a long alphanumeric string that identifies your specific file. You can find this in the URL of your Figma file when you're viewing it in the browser.
• {file_name}: This is the name of your Figma file. It's included in the URL for human readability but doesn't affect the functionality of the link.
• {node_id}: This is the unique identifier for the specific object (or node) within your Figma file. It allows Figma to identify and navigate to the exact selection you want to share. You can find the node ID by selecting the object in Figma and then looking at the URL in your browser's address bar. It typically appears after the "node-" prefix.

So, when you want to generate a URL to share a specific selection (object) in Figma, you need to replace {file_key} with the unique identifier of your Figma file, and {node_id} with the unique identifier of the selected object.

For example:

tps://www.figma.com/file/abc123/my-designs?node-id=456:789

In this URL:

• "abc123" is the file key.
• "my-designs" is the file name.
• "456:789" is the node ID of the selected object.

This URL will take anyone who clicks on it directly to the specified object within the Figma file.
This URL is just an example and doesn't work

[hitschman]

What can we do? (proposal)

• {file_key} or/and URL is stored in a config file and is used in stories.
• We ignore {file_name}. It is just human readable text and is not needed for routing.
• {node-id} is unique and is specified individually in each story.

If someone uses design-system-starter, only the `{file-key}? has to be modified to match the own Figma Design-System file.

Here some example:

• Link to page
  • https://www.figma.com/file/rrVzRO5dpuxSb27qIZ5hb8?node-id=382-489
  • https://www.figma.com/file/AhkVYkmgzgleZTuXl5LLNM?node-id=382-489
• Link to object
  • https://www.figma.com/file/rrVzRO5dpuxSb27qIZ5hb8?node-id=5002-16224
  • https://www.figma.com/file/AhkVYkmgzgleZTuXl5LLNM?node-id=5002-16224

As you can see the {node-id} remains the same and only the {file_key} is different.

[hitschman]

@storybook/addon-designs added to branch: https://github.com/Zuehlke/design-system-starter/tree/29-figma---use-figma-variables-instead-of-color-styles

Open point: Add Figma file-id to a variable and used it in Storybook stories.