Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 252 additions & 0 deletions .vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/guides/integration/assets/figma-use.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions docs/guides/integration/figma-plugin.md
Original file line number Diff line number Diff line change
@@ -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:devrel@stackblitz.com)
:::
102 changes: 102 additions & 0 deletions docs/guides/integration/storybook-addon.md
Original file line number Diff line number Diff line change
@@ -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:devrel@stackblitz.com)
:::
2 changes: 2 additions & 0 deletions docs/links.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
Binary file added docs/public/img/og/figma-plugin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/img/og/storybook-addon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.