Design system adoption

How to use the adoption dashboard

You can find the design system adoption dashboard under Analytics in the main navigation.

 

Adoption overview

• Design system components: Total number of components scanned by the analyzer.
• Used in code: Percentage of components that are used in your codebase
• Total usage: Total number of instances of all components used in your codebase
• Storybook coverage: Percentage of components that have stories in Storybook.

 

Filter by package or repository

You can filter out the data displayed on the dashboard by using the filters below the top bar by source and usage packages.

 

View all components

In the dashboard, you’ll see a list of components sorted by most used.

Click View all components to open the full list of components and their usage information. In the table you can see:

 

View component detail

Hover over the component row, and click Open button next to component name to access the drawer with component details.

 

Scans

Scans allow you to track adoption changes over time and compare specific snapshots to measure the impact of design system initiatives. Scans are created using supernova analyze in the Supernova CLI.

View all scans

1. In the header, you’ll see when the last scan was completed.
2. Click the ••• menu to open a dropdown.
3. Click All scans to view the list of all scans.

Here you can see the date of the scan, the number of packages that were scanned and from which repository, the user that uploaded it, and which version of the Supernova CLI was used.

 

Create a scan

Scans can only be created using the Supernova CLI.

 

Remove a scan

1. In the list of all scans, hover over the scan you want to remove.
2. Click the ••• menu to open a dropdown.
3. Click Remove scan.
4. In the dialog that appears, click Delete.