Lyne - Design System
Bestandteile Lyne
- Design-Tokens
- Components
- Dokumentation
"Unser Verständnis eines Design Systems"
Design Tokens
"From a purely technical point of view, design tokens are organised lists of key-value pairs that describe design decisions."
Cristiano Rastelli - Design System Lead at Bumble
Design decision
Design Token Categories
- Colors
- Typography: Font-size, Font-Family, ...
- Border-radius
- Spacings
- ...
- Animation properties
- Icons
- Sounds
- ...
WIP... W3C Standard ist in Progress
Ziel
- Designer & Entwickler nutzen die selbe Quelle von Design Tokens
- Single Source of Trouth
- Komponenten basieren auf Design Tokens
Components
"Technologie-agnostische Komponenten, welche von x-beliebigen Frameworks konsumiert werden können"
Requirements
- Resilient
- Technology Agnostic, works with Angular
- Native Support
- Modular
- Easy to use
Webcomponents
- W3C Standard Webtechnologie
- Built with Stencil.js
- Works with Angular, React, Vue, ...
- Scoped JS & CSS (more secure)
- Easy re-use
- Hidden complexity
Old
New
Dokumentation
- Shared common language / Vokabular
- Design Kits
- Code Beispiele
- Guidelines / Principles
- Design Tokens
- Components
Kontext
DESIGN SYSTEM
Design Tokens
Documentation
Components (Creation Tool & Code)
CONSUMERS
Applications
System of Systems
- System of Systems (z.B. Spotify)
- Vererbung
- Ändern, Hinzufügen, Löschen von Tokens
- Meta-Informationen
- ....
lyne-web
lyne-native
lyne-digital
lyne-core
lyne-print
Aktueller Stand Lyne
NPM: Design Tokens
Figma: Design Tokens
NPM: Components
CMS
Figma: Components
Documentation
Tools
- GitHub
- TravisCI
- StencilJS
- DatoCMS
- Chromatic
- Storybook
- Figma
- Netlify
- Gridsome
- ...