A design token szerepe és jelentősége

Serfőző Péter egy korábbi cikkében már kitért a design systemek fontosságára, szóval most az egyik alapkövét vizsgáljuk meg és nem másról lesz szó, a design tokenekről. De mégis…

• Mi pontosan a design token és mi a szerepe?
• Honnan ered?
• Mikor van szükség rá?
• Hogyan épülnek fel?
• Hogyan válik egy design system adaptálhatóvá különböző helyzetekben?

Ebben a cikkünkben mindenre választ kaptok!

Tokenek nélkül manapság már elképzelhetetlen, hogy fenntartható és jól alkalmazható design systemet építsünk, gyorsan iteráljunk és megteremtsük a kapcsolatot a design és a fejlesztés között ezért megértésük is kulcsfontosságú.

Mi is az a design token?

A design tokennek rengeteg meghatározása létezik, azonban a legáltalánosabb megközelítése az, hogy a design döntéseink újra felhasználható, adattá történő lefordítása. Azonban egy token ennél sokkal több – egy kommunikációs csatorna, egy közös nyelv a designerek és a fejlesztők között, amelynek segítségével konzisztens felhasználói felületeket tudunk mindnyájan építeni.

A design tokenek története

A design tokenek megjelenése egészen 2014-ig nyúlik vissza. Ekkor mutatta be először a Salesforce design system csapata, hogy hogyan használják a tokeneket a saját platformjukon. Ezzel a módszertannal teljesen megváltoztatták azt, ahogy manapság a design systemekre tekintünk. Azt állapították meg, hogy amennyiben a meglévő elemeket, mint például gombokat vagy checkboxokat új, adattal rendelkező tulajdonságokkal ruházzák fel, valamint az elemeket egy helyen tárolják és kezelik, az egész design rendszerüket konzisztensen tudják skálázni az összes platformukra.

A tokenek fontossága a modern terméktervezés

Bátran kijelenthető, hogy amikor egy terméket használunk mindenhol tokenekkel találkozunk: színekként, távolságokként, lekerekítésekként és tipográfiai értékekként vannak meghatározva a felület különböző részein. Ezekből a tokenekből épülnek fel a korábban design system alapjaiként szolgáló atomi elemek.

A tokenek kulcs szerepet játszanak abban, hogy fenntartható, skálázható és fejlesztésre alkalmas designt és terméket hozzunk létre, ugyanis olyan adatokat hordoznak, amik az alapját képzik egy megbízható rendszernek, melynek mentén a UI is felépül. Design tokennel kifejezhetünk bármit, aminek van értéke, például egy színt hexacode formájában, egy térközt, pixel vagy .rem formájában, vagy egy szöveges elemet a mérete alapján.

A design tokenek egyik legnagyobb előnye, hogy platform független és könnyű dekódolni bárki számára hiszen a tokenek konkrét megnevezéseket használnak a színkódok és pixelben kifejezett értékek helyett.

A tokenek tehát a rendszerünk egyetlen igazságforrásaként szolgálnak, éppen ezért sokkal könnyebb és gördülékenyebb változtatásokat eszközölni a komponensek vagy stílusok esetén, valamint általánosságban a design és a fejlesztés között.

A tokenek alapjai

Ahhoz, hogy megértsük a struktúráját a design tokeneknek a legegyszerűbb egy való életből érkező példával kezdeni. Gondoljunk csak egy macskára, akit a gazdái elneveztek Cirmosnak. Azonban ahogy Cirmos sorra új kontextusban és helyzetekben bukkan fel mindig új és új beceneveket kap és mindenki máshogy kezdi el hívni. Van, aki Cirminek, van aki Cirmikének hívja. Ugyan mindenki ugyanarra a macskára gondol, azonban a kontextus és az emberek más neveket adnak neki. Nincs ez másképp a színekkel sem. Ha van egy brand színünk, például a brandguide esetén #FFDC00, az rengeteg kontextusban előfordulhat. Ugyanez a szín egy árnyalat a sárga palettánkban az illusztrációkban, egy link gomb színe, vagy éppen egy elsődleges CTA-nak a háttérszíne is. Ahogy Cirmos, a színkódok is más-más környezetben fordulnak elő, mégis ugyanazt az értéket hordozzák, a színkódjukat.

Mikor van szükség tokenekre?

A design tokenek, ahogy a design systemek sem mindig kötelezőek. Akkor megfontolandó a design token módszertan bevezetése, ha…

• Újraterveznéd a már meglévő, vagy egy teljesen új terméket építenél.
• A design systemed több, mint egy terméken vagy platformon van használva.
• Könnyen frissíthető és fenntartható stílusokat szeretnél használni a jövőben.

A tokenek felépítése

A tokenek felépítésére nincs egy általánosan jónak ítélt módszer és nagyban függ az adott csapattól, terméktől és lehetőségektől. Mégis, vizsgáljuk meg, hogy milyen szintek mentén lehet felépíteni egy fenntartható token rendszert a színeken keresztül és vegyük alapul a brandguide által is használt #FFDC00 színt.

Az alapok

Mindenekelőtt a színkódunknak kell egy egységes nevet adni, amellyel tudjuk azonosítani. Tehát ahelyett, hogy mindig színkódról kellene majd beszélnünk, elég lesz megnevezni az adott tokent. Ezt hívjuk primitív tokennek. A brandguide színkódja egy sárga szín, ezért egy sárga palettába illesszük bele az elnevezés során. Így jön létre a yellow-100 nevű primitív tokenkünk.

#FFDC00 = yellow-100

Két szintes struktúra

Ha nagyobb flexibilitásra és a primitív tokenek újrafelhasználhatóságára van inkább szükség, érdemes lehet ezt választani. Ebben az esetben az összes komponensünknek és stilisztikai elemünknek a primitív tokent adjuk meg hivatkozásként. Azaz:

#FFDC00 = yellow-100

yellow-100 = border-color-primary , icon-color-primary 

Három szintes struktúra

Amennyiben kötöttebb és jobban definiált rendszerre van szükség, a három szintes struktúra lehet a segítségünkre. Ebben az esetben magát a kontextust is meg kell határoznunk, azonban ha több termékre és különböző vizuális változatokra tervezünk, ezzel a módszerrel sokkal könnyebb változtatásokat eszközölni és felépíteni a designjainkat a különböző kontextusokban, viszont ez valamelyest időigényesebb.

#FFDC00 = yellow-100

yellow-100 = brand-color-primary

brand-color-primary = border-color-primary , icon-color-primary 

Az adaptálható interface

Ahogy korábban említettük, a design tokenek hatalmas előnye, hogy nagyon könnyen adaptálhatóak más témák, módok és különböző méretekben. Ez a fajta adaptálhatóság pedig a hosszútávú tervezés meghatározó eleme lehet. De miről is van szó?

Témák alatt gondoljunk a vizuális különbségekre, mint például a színekre vagy lekerekítésekre. Képzeljünk el egy digitális terméket, aminek a végfelhasználói felülete kék színű, azonban az admin felülete fekete a megkülönböztethetőség jegyében. Tokenek segítségével rendkívül egyszerűvé válik ugyanazokat a komponenseket használni a különböző felületeken csak más színekben.

Módok alatt érthetjük a világos, sötét vagy magas kontrasztú módokat, amelyek ma már alapelvárást jelentenek. Tokenek segítségével definiálhatjuk például az egyes színek világos és sötét módban történő megjelenését is. Könnyedén meghatározhatjuk, hogy az elsődleges szövegnek a színe világos módban fekete, míg sötét módban fehér legyen. Ugyan ez triviálisnak tűnhet manapság, azonban fenntartható és skálázható módokat tokenek nélkül elképesztően nehéz építeni.

A különböző méretek használatai is gyakori tulajdonságai lehetnek termékeknek. Vegyük példaként egy mobil és egy web dashboard felületeit. Amíg mobilon például standardizálunk 48px magasságú gombokat a megfelelő touch area érdekében, addig a webes dashboard esetén 40px-es gombot használunk. Tokenekkel egyből észlelhető, hogy a designunk melyik felületen van jelen, ennek megfelelően bármilyen inkonzisztenciát meg tudunk előzni.

Design és fejlesztés – kéz a kézben

A felületeink tokenizálása nem csak kiváló a konzisztencia és skálázhatóság megteremtése, azonban egy remek lehetőség a design és fejlesztés kapcsolatának további mélyítésére is. Amikor szeretnénk tokeneket bevezetni a folyamatainkba az egyik legfontosabb elem a fejlesztőkkel és a csapatunkkal való egyeztetés, hogy mindenki számára komfortos, könnyen érthető, használható és fenntartható elemekből épüljenek fel a designjaink.

Amennyiben a további design tokenekkel kapcsolatos témák érdekelnek, a Design Token Community Group rengeteg hasznos anyaggal láthat el.