Adopt

5 surfaces

Surfaces

Integrations

Strategy & Discovery

2
VistalyProductboard

Research & Insights

1
Dovetail

Knowledge & Docs

1
Notion

Design

1
Figma

Analytics

1
PostHog
DesignBeta

Coming from Storybook

25% entity overlap

Import

Your design system's source of truth: every component and variant catalogued as a design_component node in the product graph.

The structural finding

Storybook is a complete, machine-readable catalog of every UI component an engineering team has built. Its UPG story is entirely in the design system region: Components map to `design_component`, Stories (documented variants) also map to `design_component` with a parent reference, and Docs pages map to `document`. The key enrichment: `design_component_implements_feature` connects the design system catalog to the product features it delivers, making "which components implement this feature?" a one-line graph query.

What UPG adds

1

Design system inventory: a complete, queryable catalog of every component. ("which components implement feature X?" becomes a graph traversal.)

2

Feature traceability: design_component_implements_feature connects the design system to the product strategy that motivated it.

3

Component refresh cycle: when the design system updates, the component nodes can be refreshed from the Storybook export, keeping the design system a first-class citizen of the product graph.

Schema mapping

Direct matches
Component→design_component
Story→design_componentDocumented variant of a component; same entity type, parent reference preserved
Docs Page→document
Maps with caveats
Story Index Entry→design_componentCompiled index entry, used to drive the import without running Storybook
Tag→(tags[] property on component node)
What UPG adds
design_systemfeaturescreendesign_token
Skipped:Addon · ArgType · Decorator · Play Function · Manager config · Preview config

The key edge

The single most important semantic relationship this integration enables.

node_informs_node

Defined in the UPG specification

Sample import

Storybook component catalog: Components + Stories + Docs

Input (from Storybook)
Output (UPG nodes)
Component
Button
path: Components/Button
→
design_component
Button
↳ design_system_contains_design_component
Story
Button/Primary
→
design_component
Button/Primary
↳ node_informs_node
Story
Button/Disabled
→
design_component
Button/Disabled
↳ node_informs_node
Docs Page
Button: Usage Guidelines
→
document
Button: Usage Guidelines
↳ node_informs_node

How to import your Storybook data

Via the CLI (coming soon)

The Storybook adapter is built and tested. A one-command import via the UPG CLI is in development:

npx unified-product-graph import --from storybook

This will fetch your Storybook data, map entity types automatically, and write everything to your graph. Today you can use the Markdown import or the adapter directly in code.

▸ For developers: use the adapter directly
import { StorybookAdapter } from '@unified-product-graph/adapters'
// Pass pre-fetched Storybook data as SourceItem[]
const adapter = new StorybookAdapter()
const result = await adapter.convert(items)
// result.nodes → typed UPG entities
// result.edges → canonical relationships
// result.warnings → items needing review

Get started

The Storybook adapter ships in @unified-product-graph/adapters. Install it, then run the import command.

# one-time install
$ npm install -g unified-product-graph

# then import
$ upg import --from notion

Other tools in Design

← All integrations