Design System

A design system is a collection of documents, articles, examples, code snippets, design guidelines, and components for the product. It is usually host

Design System
Play this article

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πŸ‘πŸ‘πŸ‘πŸ‘ …

Β