feat: add storybook and figma pages (#192)

* create page

* remove img

* add figma

* tweaks

* fix link

* fix image

* social images

* update figma install instructions & add new gifs

* final fixes!

Author: peter-zawistowicz

.vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs

@@ -0,0 +1,69 @@
+---
+title: How to install and use the StackBlitz plugin for Figma
+description: With StackBlitz’s Figma plugin, Dev Mode users can open components in StackBlitz directly from Figma. 
+og_image: figma-plugin.png
+---
+
+# {{ $frontmatter.title }}
+
+[Figma](https://www.figma.com/) is a collaborative UI/UX design tool. Figma’s [Dev Mode](https://www.figma.com/dev-mode/) enables developers to inspect designs, extract code, and access design details, streamlining the design-to-production process.
+
+Figma supports a [number of plugins](https://www.figma.com/community/category/development/plugins) that extend the functionality and integrate additional tools with the platform.
+
+::: tip Available with all StackBlitz plans including **Personal**, **Personal+**, **Teams**, and **Enterprise**.
+
+The plugin is compatible with all Figma plans.
+:::
+
+## About the StackBlitz plugin for Figma
+
+With [StackBlitz’s Figma plugin](https://www.figma.com/community/plugin/1287113487428429346), Dev Mode users can open components in StackBlitz directly from Figma. 
+
+![StackBlitz's Plugin for Figma Dev Mode](./assets/figma-use.gif)
+
+After configuring the plugin, you will be able to:
+
+- Link layers in Figma to specific components in your design system
+- Open the relevant components in an instant, browser-based development environment directly from Figma Dev Mode
+- View and modify the relevant component in StackBlitz without any local configuration
+- Preview any changes live within StackBlitz
+- Commit edits back to the repository or open a pull request
+
+## **Installing the plugin**
+
+To use the StackBlitz plugin, add it to a Figma file from either:
+
+- **The [plugins directory](https://www.figma.com/community/plugin/1287113487428429346)** by clicking “Open in…” and then selecting the name of the file.
+
+
+- **Dev Mode within your Figma file** by searching for "StackBlitz" under *Plugins*
+    
+    ![Figma plugin directory](./assets/figma-installation.gif)
+    *Initialize the StackBlitz plugin from within Dev Mode.*
+
+
+## Using the StackBlitz plugin with Dev Mode
+
+Once you have added the plugin to your Figma file,
+
+1. Enable [Dev Mode](https://www.figma.com/dev-mode/) is on (`Shift` + `D`)
+1. Select a layer
+1. Open in the StackBlitz plugin and paste a URL of a repository with the code of your project.
+    - You can also use the URL of a specific file within this repository: typically, a component file, for instance: https://github.com/stackblitz/docs/blob/main/.vitepress/theme/components/CardLists/CardList.vue
+1. Click the "Create instant environment link" button to have the link generated for the selected layer.
+
+The link is now added to the layer's Dev resources.
+
+When you click it, a new tab will open with the full IDE loaded with your project. If your link included a file, this file will already be open in the editor.
+
+### Recommended uses for the plugin
+
+We suggest providing instant environment links, especially for the essential components in your app. The components that might need adjustments in future are good candidates as well.
+
+Generally, every time a developer looks at a component in Figma to make changes in the code, having a resource link handy will make their work so much easier!
+
+For more information, [view the StackBlitz plugin in the Figma community directory](https://www.figma.com/community/plugin/1287113487428429346) and refer to the [Figma Dev Mode documentation](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode).
+
+:::info How can we improve this guide?
+Haven't found an answer to your question? [Let us know!](mailto:[email protected])
+:::

docs/guides/integration/assets/figma-installation.gif

@@ -0,0 +1,102 @@
+---
+title: How to install and use the StackBlitz addon for Storybook
+description: With StackBlitz’s addon, Storybook users can open stories in StackBlitz directly from Storybook.
+og_image: storybook-addon.png
+---
+
+# {{ $frontmatter.title }}
+
+[Storybook](https://storybook.js.org/) is a widely used open-source tool for building UI components in isolation. It allows developers to create and test UI components interactively, separate from the main application, facilitating easier documentation, debugging, and visual testing of different states and edge cases.
+
+Storybook supports a number of [addons](https://storybook.js.org/docs/addons) that extend the functionality and integrate additional tools.
+
+::: tip Available with all StackBlitz plans including **Personal**, **Personal+**, **Teams**, and **Enterprise**.
+
+The addon is compatible with all Storybook deployments including for Chromatic customers.
+:::
+
+## About the StackBlitz addon for Storybook
+
+With StackBlitz’s [addon](https://storybook.js.org/addons/@stackblitz/storybook-addon-stackblitz), Storybook users can open stories in StackBlitz directly from Storybook.
+
+![Open Storybook stories in StackBlitz](./assets/storybook-addon.gif)
+
+After installation, you will be able to:
+
+- Open an instant, browser-based development environment directly from Storybook
+- View and modify the relevant component in StackBlitz without a local development environment
+- Preview any changes live within StackBlitz
+- Commit edits back to the repository or open a pull request
+
+## **Installing the addon**
+
+First, install the addon by running the following command:
+
+::: code-group
+
+```bash [yarn]
+yarn add --dev @stackblitz/storybook-addon-stackblitz
+```
+
+```bash [npm]
+npm install @stackblitz/storybook-addon-stackblitz --save-dev
+```
+
+```bash [pnpm]
+pnpm add --save-dev @stackblitz/storybook-addon-stackblitz
+```
+:::
+
+Then, add the addon to `.storybook/main.ts|js`:
+
+
+```tsx
+export default {
+  addons: ['@stackblitz/storybook-addon-stackblitz'],
+};
+
+```
+
+Configure the repository URL in `.storybook/preview.ts|js`:
+
+```tsx
+export default {
+  parameters: {
+    repositoryUrl: 'https://github.com/[username]/[reponame]'
+  },
+};
+```
+
+In your story files, set the file path for the specific story, for instance:
+
+```tsx
+export const Primary: Story = {
+  args: {/* ... */},
+  parameters: {
+    filePath: 'src/stories/Button.tsx'
+  }
+};
+```
+
+If your components are placed in multiple repositories, you can also define the repository URL for each specific story:
+
+```tsx
+export const Primary: Story = {
+  args: {/* ... */},
+  parameters: {
+    filePath: 'src/stories/Button.tsx',
+    repositoryUrl: 'https://github.com/[username]/[reponame]'
+  }
+};
+```
+
+## Using the addon
+
+After successful installation, you will see a new “Open in StackBlitz” button in the navigation. When clicked, this will open the current story in StackBlitz in a new tab.
+
+For more information, [view the StackBlitz addon on Storybook’s integrations page](https://storybook.js.org/addons/@stackblitz/storybook-addon-stackblitz/) and refer to the [Storybook documentation](https://storybook.js.org/docs/).
+
+
+:::info How can we improve this guide?
+Haven't found an answer to your question? [Let us know!](mailto:[email protected])
+:::

docs/guides/integration/assets/figma-use.gif

@@ -20,6 +20,8 @@ const groupLinks: Record<MenuLinkGroup, MenuLinkItem[]> = {
     { text: 'Launching projects from GitHub', link: '/guides/integration/open-from-github' },
     { text: 'Creating projects with the SDK', link: '/guides/integration/create-with-sdk' },
     { text: 'Bug reproductions', link: '/guides/integration/bug-reproductions' },
+    { text: 'Integrating with Storybook', link: '/guides/integration/storybook-addon' },
+    { text: 'Integrating with Figma', link: '/guides/integration/figma-plugin' },
   ],
   codeflow: [
     { text: 'What is Codeflow?', link: '/codeflow/what-is-codeflow' },