Token architektúra
Day 17 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Bevezeted a token rétegeket: forrás → alias → komponens; platformközi felhasználás.
Tanulási cél
- Token rétegek: base (primitive), semantic, component.
- Névkonvenció: color.brand.primary, space.md, radius.sm.
- Export: web/ios/android (pl. Style Dictionary).
- Dokumentálsz pipeline-t és tiltásokat (pl. ne használj base-t közvetlenül UI-ban).
Miért fontos
- Tokenek adják a single source of truth-ot.
- Platformközi konzisztencia.
- Gyors változás: 1 token módosítás = globális update.
Magyarázat
- Base: nyers érték (#FAB908, 8px).
- Semantic: szerep (color.semantic.success.bg).
- Component: konkrét használat (button.primary.bg).
- Építési folyamat: JSON → generált platform kimenet (web/iOS/Android).
Példák
Rossz: Közvetlen hex a CSS-ben.
Jó: Mindenütt color.brand.primary tokenre hivatkozol.
Gyakorlat (vezetett)
- Írj token név-sémát (base/semantic/component).
- Készíts 10 minta tokent (szín, space, radius, motion, z-index).
- Definiáld a tiltást: UI csak semantic/componentet használhat.
Gyakorlat (önálló)
Válts ki egy képernyőn minden hardcode-olt értéket tokenre.
Önellenőrzés
- Token rétegek definiálva.
- Név-séma megvan.
- Base → semantic → component lánc működik.
Opcionális mélyítés
- Style Dictionary: https://amzn.github.io/style-dictionary/#/