StackBlitz - design to instant dev environment in a click

Implementing designs in code becomes much easier when you don't have to manually set up the environment, open and run the project, and search for the correct file. You can have all this work done for you by clicking a link!

How to use the plugin?

Make sure Dev Mode is on (⇧+D)Select a layerOpen 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.vueClick 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.

When to use it?

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!