A tokenek segítségével platformfüggetlen módon, név-érték párokként reprezentálhatjuk a tervezési döntéseket, például a színeket és a méreteket.
A tokenek lehetővé teszik a tematizálást és a design döntések egyszerű módosítását. A tokenek fejlesztési és tervezési eszközöktől és technológiától függetlenek, így a designerek és a fejlesztők egyaránt használhatják őket.
A tokenek egy megadott struktúra szerint épülnek fel. A struktúra megértéséhez érdemes tisztázni a tokenekkel kapcsolatos terminológiát.
Egy tervezési döntés vagy adat név-érték párként ábrázolva. Minden tokennek gondosan kiválasztott neve van, amely közli a token szándékát és hatókörét, és egy meghatározott elnevezési konvenciót követ.
A token értéke a token nevéhez társított adat. Ez lehet egy másik token – amit aliasnak hívunk – vagy egy érték, például RGB szín, szám vagy százalék.
A teljes design systemen átmutató tokenek. A foundation tokenekre hivatkoznak a theme tokenek. A témákon átívelő konzisztenciáért felelnek.
Egy adott témát meghatározó tokenek. A theme tokenekre hivatkoznak a szemantikus és a komponens specifikus tokenek. A design system tematizálását teszik lehetővé.
Egy token, amit több egymáshoz hasonló komponensen vagy elemen lehet alkalmazni. Általában alias, melynek értéke egy theme vagy foundation token.
Egy token, amit egy adott komponensen használunk. Akkor alkalmazzuk, ha nem tudunk semantic tokent használni. Általában alias, melynek értéke egy semantic vagy theme token.
A tokenek struktúrájának köszönhetően a theme tokenek értékeinek kicserélésével új témákat hozhatunk létre.
A tokenek elnevezése egy jól meghatározott nevezéktant követ. Az elnevezések megfelelő használata biztosítja az akadálymentesítési célok elérését és a konzisztens felületeket.
A tokenek elnevezéséhez egy három részből álló struktúrát használunk: kontextus, azonosító és variáns. A struktúra lényege, hogy az átadott információ egyre részletesebbé válik. A tokenek nevei a széles körű kontextus megnevezésével kezdődnek, az azonosítók és a variánsok pedig egyre specifikusabb részleteket írnak le.
A kontextus a token helyzetét határozza meg a rendszerben. A DÁP Design System minden tokenje a “dds” (DÁP Design System) névtér elnevezéssel indul. A névtér használata megakadályozza a különböző rendszerekből érkező tokenek konfliktusait.
Az azonosító az adott kontextuson belül egy szűkebb körbe rendezi a tokeneket. Az azonosító lehet egy szín neve (cold-grey), egy komponens valamely része (button-primary-background) vagy egy betűtípus headingjének a mérete (size-heading).
A variáns a legszűkebb rendezőelv a rendszerben. A variáns mindig egy azonosítóval már ellátott tokenhez van rendelve. Lehet szám (100, 200, 300, stb.) vagy módosító (enabled, subtle, strong, positive, negative, stb.).
A Figma UI Kit tokenjei kontextus alapján vannak kollekciókba rendezve. A tokenek listája a jobb oldalsáv Local variables menüjéből érhető el.
Hamarosan!