Tokenek

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.

Miért használunk tokeneket?

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 dap-tokens.json fájl css3, react, figma, angular és vue.js ikonokkal összekötve.
Terminológia

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.

Token

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.

Egy letöltés gomb button-primary-background-enabled annotációval.
A primary gomb háttérszíne a button-primary-background-enabled tokent használja, melynek értéke a képen látható kék szín hexadecimális kódja (#4258ED)
Érték és alias

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.

Token név és érték párok egy táblázatban, például a cold-grey-1200 token névhez #353B46 érték tartozik.
Felépítés Foundation token

A teljes design systemen átmutató tokenek. A foundation tokenekre hivatkoznak a theme tokenek. A témákon átívelő konzisztenciáért felelnek.

Egy tokent reprezentáló kártya indigo-1000 névvel.
Theme token

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é.

Az indigo-1000-et tartalmazó token kártyából egy nyíl a brand-1000-et tartalmazó kártyára mutat.
Semantic token

Egy token, amit több egymáshoz hasonló komponensen vagy elemen lehet alkalmazni. Általában alias, melynek értéke egy theme vagy foundation token.

Az indigo-1000-et tartalmazó token kártyából egy nyíl a brand-1000-et tartalmazó kártyára mutat, amiből egy nyíl az icon-brand-subtle token kártyára mutat.
Komponens specifikus 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.

Az indigo-1000-et tartalmazó token kártyából egy nyíl a brand-1000-et tartalmazó kártyára mutat, amiből egy nyíl az icon-brand-subtle token kártyára mutat. Ebből egy nyíl a subtle-button-icon-enabled kártyára mutat ami végül össze van kötve egy gomb ikonjával.
Tematizálás

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 teljes token struktúra felépítése két ábrán. Az egyiken az indigó színű téma tokenjei a másikon a teal színű téma értékei láthatóak.
Nevezéktan

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 tokenek nevezéktanának példái egy táblázatban. Például a kontextus oszlopban lévő dds-color-semantic tokenhez a text-neutral azonosító és a subtle variáns tartozik.
Kontextus

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.

Azonosító

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).

Variáns

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.).

Tokenek Figmában

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.

A Figma local variables ablak a design system tokenjeivel.
Tokenek kódban

Hamarosan!