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

Anil Verma's photo
Anil Verma
Β·May 14, 2022Β·
Design System

Subscribe to my newsletter and never miss my upcoming articles

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

Β 
Share this