Design System Features

• Layout
• Color
• Typography
• Components
• Theming
• Design source file
• Mobile guideline
• Icons/Images/Spacing
• Data Visualization

Design Tokens

Design tokens are all values that are needed to construct and maintain a design system

Like- Color, Typography, spacing. Ex- primary-color, econdary-color, cta-bg-color.

These values are used in place of hard-coded values in order to provide flexibility, and symmetry across all products

Best Practices while Creating a Design System

• Keep scalability in mind
• Focus on reusability of components
• Efficient communication across teams/stakeholders
• Keep it simple
• Put smart documentation
• Create a proper roadmap
• Do proper versioning
• Proper testing of all features
• Make it adaptable maintainable and testable
• Make it contextual- demonstrating, context will include showing screenshots/videos of component
• Keep an issue tracker tool like Jira for BUG reporting
• Set rules on how someone can contribute
• post rollout follow-up with user and client
• Setup a feedback collection tool

Design System Success Metrics

Adoption Metrics Are teams aware of using and engaging with the design system?

1.1 Number of queries around using/engaging with system design per week. Fewer queries indicate good adoption metrics.

1.2 Percentage of products of a company are built with a design system. A low number will indicate bad adoption metrics.

Outcome Metrics- Are we successfully achieving the goals that we had set with the design system?

Ex- How much time will require for a module to get delivered with and without the design system.

Less time with the design system will indicate good outcome metrics.

Thanks, Happy Learning👏👏👏👏 …