Lyne
Design System @ SBB
Yves Tscherry (FE)
Bleuer Marius (FE)
Cilurzo Manuel (UX)
Heid Sabrina (FE)
Schindler Daniel (UX)
Stürzinger Florian (UX)
Zumstein Michael (FE)
Was geht ab?
Design Tokens
From Figma To Code
1st
2nd
Theorie
Praxis
😎
😭
1 Design Tokens
Was sind 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
Kontext
DESIGN SYSTEM
Design Tokens
CONSUMERS
Applications
Components (Creation Tool & Code)
Documentation
Challenge: accepted
"Design Tokens should be managed in a single Place, accessible to Designers and Developers."
Verwendung überall
(Creation Tool UND Code)
Verwaltung an einem Ort
(Creation Tool ODER Code)
Schnittstelle von der einen in die andere Welt
The web is not alone...
- 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
... off-topic:
2 From Figma to Code
Oder: From Figma to code to components to documentation
Start Workflow
- Blick auf die aktuelle Dokumentation
- Der Farbwechsel in dieser Form ist kein realistischer Use-Case
Design Token Workflow
Figma
Style Dictionary
NPM & CDN
components
documentation
... aktuell noch keine Quality-Gates (z.B. PR's)
Figma
- Shared Team Library
- Änderungen -> Conventional Commits
- Tokens beliebig verschachteln
- Zurzeit verarbeiten wir:
- Farben
- Icons
- Schriftgrössen
StyleDictionary, NPM & CDN
- Express Server empfängt Figma Webhook Request
- Request triggert Travis Job
- JavaScript greift Tokens von Figma Library ab
- StyleDictionary verarbeitet die Tokens
- CSS, SASS, LESS
- JavaScript, JSON
- Auf NPM und CDN veröffentlicht
Components
(Design Tokens sind via NPM installiert)
- Travis Job wird getriggert
- Design Tokens npm-update
- Components werden neu gebuildet
- Components via npm veröffentlicht
- Storybook wird neu gebuildet
- Storybook via Netlify veröffentlicht
Documentation
(Components und Design Tokens sind via NPM installiert)
- Travis Job wird getriggert
- Components npm-update
- Design Tokens npm-update
- Documentation mit Gridsome statisch generiert
- Veröffentlicht auf Netlify
Extras
- Slack Notifications
- Gridsome: Static Site Generator. Server-seitig gerendertes HTML aus einer Vue App, gehostet auf Netlify
- Versionierte Storybooks & Branch-Preview Builds:
https://lyne-documentation.netlify.app/deployments/
- Documentation Roll-Back mit Netlify
Coole Tools
Thanks from Lyne
Frontend Best Pratices
By Yves Tscherry
