React Component Scanning
The plugin scans your Storybook stories and renders each one as a Figma frame — automatically, without any manual work.
How it works
The scanner reads your `.stories.tsx` files, not your component files directly. Each named story export tells the plugin exactly what to render: the JSX tree, decorator wrapper classes, and any props passed to the component. The component file is then resolved to fill in default styles and sub-component structure. The result is a Figma frame per story that looks identical to what you see in Storybook — same layout, same colours, same spacing.
Usage
- 1
Write your components and stories as you normally would — no special annotations needed.
- 2
Each named story export (e.g. `Default`, `Sizes`, `Disabled`) becomes a separate Figma frame.
- 3
The scanner reads the story's render function, resolves the component's JSX tree, and captures all Tailwind classes.
- 4
Components must use Tailwind utility classes — CSS modules and inline styles are not scanned.