Storybook View

Storybook View lists every component captured by Sorb and lets you materialize it into Figma as native nodes — with Figma Variable bindings applied automatically.

Layout at a glance

┌──────────────────────────────────────────┐
│ [Tokens]  [Storybook ▼]  [⚙ Settings]      │  ← tab bar
├──────────────────────────────────────────┤
│ [Filter ▾]                           [↻]   │  ← filter + refresh
├──────────────────────────────────────────┤
│ ☐ │ ▓▓▓ │ Button │ Primary   │ [Insert]    │
│ ☑ │ ▓▓▓ │ Button │ Secondary │ [Insert]    │  ← story rows
│ ☐ │ ▓▓▓ │ Card   │ Default   │ [Insert]    │
├──────────────────────────────────────────┤
│ 2 selected  [Insert selected] [Insert all] │  ← bulk toolbar
├──────────────────────────────────────────┤
│ ████████░░░░░░  8/12 (67%)                  │  ← progress (during insert)
├──────────────────────────────────────────┤
│ 12 captured stories loaded                 │  ← status bar
└──────────────────────────────────────────┘

The story table

Each row has:

Checkbox — select for bulk insert; the header checkbox selects all.
Thumbnail — a lazy-loaded SVG preview of the captured layer tree. Very large trees fall back to a type-initial circle with a color hash.
Component — the component name (this column hides itself if no stories carry a component field).
Story — the story name.
Insert — insert this single story.

Refresh (`↻`)

Reloads the full captured component index from the bridge (GET /artifacts).

Bulk insert

When at least one row is checked, a bulk toolbar appears with a selection counter, Insert selected (only checked rows), and Insert all (N) (every loaded story, regardless of selection). A progress bar shows done / total while a bulk insert runs.

What "insert" produces

Each story materializes its captured layer tree into Figma as native nodes — frame + auto-layout, text, fills, strokes, corner radius, and drop shadow, all from the captured data. Two things make this more than a paste:

Token binding: any value that maps to a Figma Variable (by name) is bound as a Variable reference — colors as paint bindings, corner radius as cornerRadius. So the inserted component tracks your tokens.
Labels: if Label inserted components is on in Settings, each insert is wrapped in a named frame.

For bulk inserts, components are laid out on a grid that auto-centers below your existing content.

Post-insert verification

After each insert the plugin reports geometry plus a tally of bound Variable fields back to the bridge — the signal Sorb uses to check that the insert bound the fields it should.

Works with Figma. Not affiliated with, or endorsed by, Figma. Figma is a trademark of Figma, Inc.