Components View

Components View (the plugin's Components tab) lists every component Sorb has captured from your Storybook and lets you materialize one into Figma as native nodes — with Variable bindings applied automatically.

Components View — the plugin's Components tab listing captured stories with thumbnails and a per-story Insert button

Components View — captured stories with thumbnails and per-story Insert.

Layout at a glance

┌──────────────────────────────────────────┐
│ [Tokens]  [Components ▼]  [⚙ Settings]    │  ← tab bar
├──────────────────────────────────────────┤
│ Components (insert captured stories)       │
│                      [Preview]  [↻]        │  ← header actions
├──────────────────────────────────────────┤
│ [Filter ▾]                                 │
├──────────────────────────────────────────┤
│ ☐ │ ▓▓▓ │ 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)
└──────────────────────────────────────────┘

Header actions

Preview — pushes the current tokens into a live preview session against your Storybook URL (set in Settings).
↻ (refresh) — reloads the full captured component index from the bridge. Switching to this tab also triggers a refresh automatically.

If nothing has been captured yet, the list shows a guided two-step empty state instead of a blank table, with a copyable npx sorb-seed capture command to run against your project.

The story table

Each row has:

Checkbox — select for bulk insert; the header checkbox selects all visible rows.
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 captured stories carry one).
Story — the story name.
Insert — insert this single story.

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 (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. 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 lay 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.