Lyne
Design System
Contents
- Overview
- Components
- Design Tokens
- Current State
- Update Workflow
- Use Components
- Documentation Platform
- Upcoming
1. Design System Overview
Design Tokens
Components
Documentation
Applications
DESIGN SYSTEM
CONSUMERS
2. Components
Requirements
- Resilient
- Technology Agnostic
- Native Support
- Modular
- Easy to use
Status quo
The new Way
3. Design Tokens
- Example: Duet
- Goal:
- Single Source of Truth
- Easy integration for all Technologies
- Always available
- Used by components
4. Current state
Storybook
https://lyne-components-storybook.netlify.app/
- What is it? What is the purpose?
- Knobs, Actions, a11y, Documentation
Documentation Page
https://lyne-documentation.netlify.app/
- What could the documentation contain? (https://www.duetds.com/)
5. update workflow
Versioning
- Design Tokens and Components are versioned
- The process for creating and publishing new versions is completely automated
A. Change a Design token
- Make change in code
- Push to repo
- New version is published automatically
- Design Tokens on npm
B. Use new design tokens
- Install new Design Tokens Package
- Pull Request
- Multiple Tests and Quality Gates
Regression tests: Chromatic
- What is a visual regression test?
- What is chromatic?
- What is the workflow for chromatic?
- UI Tests: developer
- UI Review: UI/UX/PO/Stakeholders
7. Documentation Platform
- Technology
- Headless CMS
- Statically Generated Site
- Easy to edit
- Instant Publishing
- Dato
8. Upcoming
- Integration in Creation Tools
- Information Architecture
- Design Token Architecture
- Monitoring
- Tracking
- Design for Documentation Platform
- Asset Management (Images, Icons, etc.)
- Visual Design Token editing
- Processes, Responsibilities
- Prototyping
- ...
Lyne Design System - July 2020
By Yves Tscherry
