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.

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.

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.

It’s the perfect way to quickly gather more information about the component available in code.