Implementing a design System

Definition

  • Design System is a collection of reusable ComponentsComponents
    Components are portions of reusable code within your system, and they serve as the building blocks of your application’s interface.

    Source


    [[BOOK- Design Systems Handbook]]
    [[§System]]

    , build using AtomicityAtomicity


    Atomicity refers to the smallest, irreducible building block material. The core concept is that as you build things after defining the smallest, individual elements, then the possibility of...
    and Sub-atomic Design TokensDesign Tokens
    Design tokens are the “subatomic” foundation of a design system. They are the values needed to build a design system, like color, space, typography, etc., represented as data.

    Design token types

    ...
    particles that follow the guideline, behave consistently, and together work as the building block of the product.
  • A design system is not a pattern library or a sticker sheet. Atoms being consistent or similar in a design system won't make the final result compatible. For that, it requires a clear documented guideline on behavior and usage patterns. Usage patterns, organisms, and templates make the system scalable Design is ScalingDesign is Scaling
    Design is not just about visual aesthetics. One reason businesses invest in design is that it defines the products, builds consistency, reduces the learning curve, thus attracts and retains custome...
    .
  • It follows Lego-like structureLego-like structure

    An easier way of understanding [[Atomicity]] is by comparing it with Lego Box. Lego Box contains a set of 'blocks,' a basic unit of the game.


    Atomic Concept

    Lego Blocks are the smallest com...
    but does come with some themes and rules. The combinations are not unlimited.
  • Consider the design system as the single source of truth that groups all the elements that will allow the teams to design, realize and develop a product.
  • Start with Scorecards to Pilot Design System MigrationScorecards to Pilot Design System Migration

    Do [[Interface Inventory]], and find the frequency of usage of common components. Apply [[Pareto Principle]]
    It is better to start with a pilot project instead of doing it for the entire proje...
    instead of over planning and underachieving.
  • Design System Learning

Source