Storybook is a powerful open-source tool for developing UI components in isolation. It's widely used by engineers to maintain the Code library of components. Our Design System Manager Template in Coda helps to facilitate integration with Storybook, by linking your design components in Figma with your engineering components in Storybook. This integration can provide a clear view of how many design components are associated with engineering code components, thereby enhancing the collaboration between design and engineering teams.
However, the integration of Storybook requires consideration of your company's security policies, as engineering libraries are usually stored on secure company-related domains. Here are some options:
Public Storybook Libraries: If your Storybook library is public, you can directly embed them into the Coda file
Private Storybook Libraries: If your Storybook library is private, you have a couple of options:
The simplest option is provide a link to Storybook Stories: You can provide a direct link to your private Storybook story within your Coda file. Here is the data structure for that
Extract Storybook Data: You can generate a table of Storybook stories by running the npx storybook extract command in the terminal. This command will create a JSON file that can be converted to CSV and then imported into Coda. This approach is more preferable. Let me know on
GitHub Actions: If your engineering team is using GitHub, you can set up a GitHub action to push data about new components directly to a table in Coda using the Coda API. This is the best option of how to connect Design and Code within Figma
