Lyne Design System

@SBB

History

@SBB

  • Relaunch sbb.ch -> 4 years ago
  • EOL Tech Stack (Estatico, jQuery)
  • Goal: deliver Assets that are easy to consume by others
  • Solution -> Web Components
  • Elaboration -> Design System
  • Immense pace/progress
  • Various presentations, interviews...
  • Spread the word...


-> Other projects / key players start to see the need for a company wide Design System

Targets

... defined by Lyne

  • Tech-Agnostic Components
  • Documentation: Shared Common Language
    • Ressources
    • Guidelines
    • UX Principles, Patterns, Principles
  • Single Source of Truth
  • Bring Dev and UX/UI close together

Building Blocks

... everything is work-in-progress ...

  • Figma
  • Design Tokens
  • Web-Components
  • Documentation

Maintain in one single place, distribute via automation

Design Tokens

Definition

"Design Tokens are organized lists of key-value pairs that describe design decisions"

 

Cristiano Rastelli

Examples:

  • Colors
  • Icons
  • Spacings
  • ...
  • Animations
  • Sounds

Design Tokens

Workflow

  1. Figma Team Library is published
     
  2. CI fetches contents from Figma
     
  3. Workflow creates Design Tokens for various platforms (Web, iOS, Android, Sketch)
     
  4. Design Tokens are published to npm
     
  5. Design Tokens are published on cdn

Design System

Workflow

  1. Design Tokens are changed
     
  2. Web Componets are rebuild
     
  3. Documentation is rebuild
Made with Slides.com