You can create a styleguide that includes all of your Storybook stories natively embedded into a dedicated tab on a page for each component in the Storybook site.

This provides you with a way to quickly get started before adding more content to the auto-created pages (Design embeds, for example) or brand new pages (for Figma variables, for example). If you try it out - let us know what you think.

Create the styleguide

Click the Create styleguide button on your Styleguides dashboard and (optionally) provide a title and logo for the styleguide (both can be changed later) and click Next.

Click the Connect Storybook button and then copy and paste the URL to the Storybook site and click Create my styleguide.

A styleguide is then created that consists of the following:

• A cover page that displays the name of the styleguide
• A Components section that contains a page for each of the components in the Storybook site
• Each page is named after the Storybook component and contains 3 tabs:
  • A Code tab that contains a Storybook native embed for each story for the component
  • A Design tab that contains an empty Design block ready for you to embed the equivalent component from Figma (or another design tool)
  • A Usage tab that contains an empty Rules block ready for you to add some "Dos and Don'ts" for your component