Dev Mode overview
In 2023, Figma released Dev Mode; a special mode so that developers can inspect designs in a more comfortable way.
story.to.design also extends Figma’s Dev Mode with extra information for developers:
- Code snippet
- Links to stories
Code snippet generation
When selecting a component instance, story.to.design generates a code snippet that replicates the instance’s variant.
How to use it?
Select the story.to.design
code plugin:
![Screenshot of the story.to.design plugin in dev mode selecting code.](/_image/pages/docs/dev-mode/select-s2d_1170x1334.webp)
and the code will appear below the layout inspector:
![Screenshot of the story.to.design plugin in dev mode with code selected and React code snippet visible.](/_image/pages/docs/dev-mode/react-code_1158x1052.webp)
Links to stories
When selecting a component instance, story.to.design will give you new Dev resources links to the underlying Storybook and story.
![Screenshot of the story.to.design plugin in dev mode with Dev resources for Storybook.](/_image/pages/docs/dev-mode/dev-res_1120x272.webp)
It’s the perfect way to quickly gather more information about the component available in code.