Extracting and Normalizing the System

Learning goal

To select final token set, reduce component variants, and unify states, we must first understand the system's intricacies.

Who

Designers, developers, and project managers.

What

Extracting and normalizing the system involves selecting final tokens (color, type, spacing, radius, shadow) and reducing component variants to the essentials. This process ensures that our design system is efficient, maintainable, and aligned with the latest design standards.

Where

This lesson takes place in the design and development phases of a project.

When

When working on a new design or feature, apply these principles to streamline your workflow.

Why it matters

Extra variants cost to maintain, unify states, and reduce component variants. Unification speeds delivery and improves quality, while without deprecation chaos returns. Design systems that are not unified and deprecation-planned often lead to confusion and inefficiencies.

How

1. Select final token set: Identify the essential design elements (color, type, spacing, radius, shadow) that define your brand or product.
2. Reduce component variants: Eliminate unnecessary component variations and focus on the core design principles.
3. Unify states: Ensure that the system's states are consistent and intuitive.
4. Deprecation list and migration plan: Document the old components and create a plan for their migration or removal.
5. Dev-aligned implementation plan: Collaborate with developers to ensure a smooth implementation process.

Guided Exercise

1. Pick final token values from inventory: Use your design system's inventory to select the final token values.
2. Reduce component variants; make a matrix: Document the remaining variants and their usage.
3. Write deprecation and comms plan: Communicate the changes to stakeholders and document the deprecation process.

Independent Exercise

Align with a developer on migration order.

Self-Check

1. Final token list ready: Verify that the final token list is complete and up-to-date.
2. Variant reduction documented: Confirm that the component variants have been reduced and documented.
3. Deprecation plan exists: Ensure that a deprecation plan is in place for the removed components.

Bibliography (sources used)

Read more (optional)