What UI elements you need?

As a team, you have to define the scope of your future design system. At the moment, you have a product with an interface that you would keep as it is but "componentize".

You have some components in Figma, you have some components in code. But some are missing. When your design system is ready, you should have a set of components on the design side, same set on the code side, and the product made out of them. But before you start designing and coding, you need to understand what exactly each of you is doing. Figure it out by analyzing the current status and identifying missing parts.

Steps to analyze

• List what you have in Figma
• List what you have in code (Storybook)
• Are there intersections? Do the names match? "Merge" the lists chosing the right names.
• What are the components missing at all? What should be names for them?
• Prioritise the work, what you do first, what can wait?
• Assign the tasks

NOTE. Think carefully about your design foundation. Renaming tokens from version to version might create extra work for the developers.

You can use a Miro board for your team work:

• UI Inventory Board #1
• UI Inventory Board #2
• UI Inventory Board #3
• UI Inventory Board #4
• UI Inventory Board #5

Show what you have

Let's review what you have gotten!