If you are not creating your design system from scratch, you should make an inventory of the existing design. Below are the various options you can focus on when taking inventory.

Visual inventory

One way to create an inventory is the visual way.

  1. Screenshot every page: You can make screenshots of the entire pages and use masks to show only the elements you want to show. This way you can later find out where a component comes from (you may want to know this in 1 out of 10 cases). But this method costs a lot of RAM. ⏳
  2. Categorize elements: Have a look at the components itself and try to sort them. Don’t try to fill common categories – if common categories stay empty this is also a result.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5442beda-f7ca-4ed5-89cb-f3dace0ba09a/inventory_01.png

— Brad Frost / Source (Blog)

Purpose directed inventory

… or you group items by their purpose. Taking your core user journeys and mapping the core modules to sections of that user journey to help you see how these patterns fit into the bigger picture.

Keeping this map in mind helped me think in families of patterns joined by a shared purpose, rather than individual pages.

— Alla Kholmatova / Source (Design Systems book) → Yesenia Perez-Cruz, Vox Media / Source (YouTube)

Patterns

— Yesenia Perez-Cruz, Vox Media / Source (YouTube) → Alla Kholmatova / Source (Design Systems book)

— Yesenia Perez-Cruz, Vox Media / Source (YouTube) → Alla Kholmatova / Source (Design Systems book)

User journey inventory

You can also map your components on your user journey, as Airbnb does.

User journey