Learning goal

To create a UI inventory that captures components, colors, type, states, divergences, and provides a unified criteria for visual design.

Who

Designers, UX specialists, and visual designers.

A UI inventory that includes components, colors, type, states, divergences, and provides a unified criteria for visual design.

In a centralized digital asset management system or a design tool like Sketch, Figma, or Adobe XD.

When starting a new design project or reviewing existing visual design systems.

To ensure consistency and efficiency in visual design, and to streamline the design process.

Create a UI inventory:
- Components: List all the reusable UI components (buttons, inputs, etc.).
- Colors: Define a palette with 27 unique blues and 5 radius variants.
- Type: Specify typefaces and their usage.
- States: Show how components behave in different states (hover, focus, etc.).
- Divergences: Highlight any divergences from the Playbook.
Divergence list vs Playbook:
- Compare your inventory with the design system's playbook to identify divergences.
- Must/Should/Nice categorization: Classify issues based on their severity (must, should, nice).
- Quantify issue types: Count how many divergences you have from the playbook.
- Capture unified criteria: Ensure you have a unified set of criteria for evaluating visual design quality.
Be ready to capture and define visual inventories:
- Inventory exists: Check if your inventory exists in your system

Export 10 screens and build an inventory table. Mark divergences vs Playbook and bucket into must/should/nice.

Share a short report with the counts.

Check if your inventory exists, divergences are quantified, and prior buckets are ready.