D'Welt vum digitale Design entwéckelt sech stänneg, a fir kompetitiv ze bleiwen, ass et essentiell fir visuell Konsistenz iwwer all Plattformen an Apparater ze halen. Dëst ass wou Design Tokens kommen an. Dës kleng Unitéiten vum Design, obwuel dacks iwwersinn, spillen eng wesentlech Roll bei der Schafung vun harmoneschen an effektiven Benotzererfarungen.

Wat ass en Design Token?

Design Tokens sinn standardiséierte Wäerter déi d'Basiselementer vun engem Design System representéieren.
Als Erënnerung, a Design System ass e Repository deen all d'Komponente vun engem digitale Projet zesummebréngt. Dës maachen et méiglech eng kohärent Logik uechter d'Produktioun ze designen an all d'Équipen ze guidéieren, déi am Design vun enger Interface involvéiert sinn.
Design Tokens kënne benotzt ginn fir Faarwen, Schrëften, Gréissten, Margen, Whitespace an aner Designelementer ze definéieren. Dëst si mächteg Tools déi hëllefe kënnen ze verbesseren Konsistenz et la qualité Design, souwéi Zesummenaarbecht tëscht Designer an Entwéckler.
Amplaz e Wäert ze benotzen, benotze mir den Token. Dëst erlaabt Iech dann nëmmen eng Säit mat allen Tokens aginn ze hunn a kënnen op eng vertrauen eenzeg Quell.

Beispill fir en Token vun enger Faarf:

Op dësem Niveau ass en Token Design e bësse wéi d'Stiler op figma ou Croquis (Faarwen, Schrëften, Schatten, etc.) awer mat vill méi Méiglechkeeten a vill méi Flexibilitéit. En Design Token gëtt meeschtens fir Faarwen, Gréisst, Margen, Opazitéit, Grenzen, etc.

Also, anstatt ze hunn:

Mir hätten:

Den Token Design erlaabt eis Wäert änneren op der Flucht vun "{primär}" wann néideg, ouni op déi verschidde Linnen zréckzekommen.
Ausserdeem, am Fall vun Multi-Mark Design System, Dëst mécht et och méiglech nëmmen eng ze hunn eng an eenzeg Säit fir z'änneren fir de Stil z'änneren.
D'Ideal ass de selwechten Numm an de Stiler op eiser Designsoftware ze hunn fir méi Konsistenz an Einfachheet wann ofgëtt tëscht Designer an Entwéckler.
Wéi och ëmmer, d'Benotzung vun Design Tokens als integralen Deel vun engem Design System ass vill méi wéi dat. Si erlaben och eng erhéicht Skalierbarkeet, besser Kommunikatioun tëscht den Teams an dofir besser Entscheedungstreffen.

Déi zwou Zorte vun Design Tokens

• Token Primitiv
  D'Token Primitiv sinn Grondwäerter Design System. Si enthalen Faarwen, Schrëften, Schrëftgréissten, Margen, Wäissraum an aner Designelementer. Token Primitiv ginn normalerweis an engem standardiséierte Dateformat gespäichert, wéi z Language, CSS ou JAML. Dëst mécht et einfach fir Designer an Entwéckler se ze deelen an ze benotzen.
• Semantik Tokens
  Semantesch Tokens si Kombinatioune vu primitive Tokens déi eng spezifesch Bedeitung am Designsystem hunn. Zum Beispill, e Semantik Token kéint eng spezifesch Faarf sinn, déi fir e Kommando Knäppchen benotzt gëtt, oder eng spezifesch Schrëft, déi fir e Säittitel benotzt gëtt. Semantesch Tokens erlaaben Iech e kohärent an homogen Design, an Zesummenaarbecht tëscht Designer an Entwéckler vereinfachen.

Primitiv a Semantik sinn zwee wesentlech Elementer vun engem Designsystem. Si erlaben d'Basiselementer definéieren designen, an organiséieren se sou datt se einfach sinn ze fannen an ze benotzen. Andeems Dir Tokens benotzt, kënnen Designer an Entwéckler konsequent, qualitativ héichwäerteg Interfaces méi séier a méi einfach erstellen.

D'Virdeeler vun Design Tokens

• Konsistenz
  Design Tokens reagéieren ënner anerem op eng Affär Problem : wéi d'grafesch Identitéit vun der Mark mat engem Minimum vun Reiwung ze garantéieren?
  Am Fall vun enger Ännerung vun de Fundamenter (zum Beispill eng Rebranding), Design Tokens maachen et méiglech dës Ännerungen séier z'installéieren.
  Stiler sinn iwwer all Produkter a Plattformen vereenegt.
• Wiederverwendbarkeet
  Design Tokens kënnen iwwer een oder méi Produkter weiderbenotzt ginn, wat et erlaabtZäit a Ressourcen spueren an Entwécklung. Entwéckler recuperéieren Tokens direkt anstatt all Kéier nei Stiler ze kreéieren.
  Design Tokens vermeiden schwéier schreiwen Wäerter am Code.
• Ënnerhalt
  Design Tokens erliichteren Projet Ënnerhalt well se erlaben séier Stil Update. Wéi? Tokens sinn Daten déi en Numm an e Wäert enthalen déi zentraliséiert sinn.
  Andeems Dir einfach de Wäert vun engem Token ännert, wéi dee vun der Faarf vun engem Haaptknäppchen, wäert dëst all d'Knäppercher vun der Applikatioun / Site an enger eenzeger Interventioun beaflossen! Entwéckler kënnen also méi einfach Projetstiler erhalen och wann Designwahlen evoluéieren.

D'Limite vun Design Tokens

• D'Tools sinn net fäerdeg
  Zënter datt d'Format vun Design Tokens net a Steen gesat ass, huet nach keen ausgemaach wéi se se benotzen. All Equipe an Firma huet säin eegene Fonctionnement a seng eege Sprooch. Momentan der W3C schafft momentan un engem Format deen dëse Problem léise géif. Awer fir de Moment ass et ubruecht sech mat den verfügbaren Tools an hir Aschränkungen ze maachen. Figma huet uginn datt et un dësem Thema schafft, awer dës Feature wäert wahrscheinlech net virum Enn vum Joer verëffentlecht ginn.
• Eng Verlängerung am Workflow
  Fannt a Nomenklatur vu jidderengem versteet ass eng richteg Sich no den Hellege Graal. Zousätzlech zu deem, wéi all System, muss et sech no enger gudder Zuel vu Parameteren entwéckelen. Dobäi kënnt nach den Komplexitéit vun Dokumentatioun et le Zäit néideg fir et ze schreiwen. Teams spezialiséiert am Design System sinn nach ëmmer net verbreet, an dëst ass nach méi wouer fir Leit déi sech fir Dokumentatioun schreiwen.
  Déi geringste Ännerung vun engem vun dësen Primitiven kann vill Updates generéieren déi berücksichtegt musse ginn.
  En Iwwerbléck vum System ze hunn ass essentiell wann Dir Design Tokens implementéiert.
  d'Ëmsetzung ass komplex a erfuerdert bedeitend Basis Effort, awer ech sinn zouversiichtlech datt esou eng Approche wäit iwwerwältegt ass vun den exponentielle Virdeeler déi et bréngt.

Konklusioun

Design Tokens sinn Entitéite mat engem spezifeschen Numm an Nomenclature déi späicheren ondeelbar Donnéeën (wéi Abstand oder Faarf zum Beispill). Si sinn all Wäerter noutwendeg fir Systemkonstruktioun an Ënnerhalt. Mir benotzen dës Wäerter anstatt se am Code ze "hardcodéieren" fir maximal ze garantéieren Flexibilitéit, Homogenitéit et de Skalierbarkeet iwwer déi verschidde Produkter an Erfahrungen ... Si sinn och agnostesch a sollen op all Plattform schaffen.
Awer virun allem representéieren se eng Methodik an net nëmmen "Variablen". Si erlaben all Design System iwwer all Plattformen, Apparater a Produkter ze wuessen, déi eng Mark kann hunn. De variabelen Deel ass just eng Drëps am Ozean.

Fir matzehuelen

• Design Tokens späicheren net nëmmen Informatioun, mee och Informatiounen iwwerdroen.
• Si gi benotzt fir unzeginn primitiv Wäerter, awer hire richtege Potenzial gëtt opgedeckt wann se benotzt ginn UI Komponent Dokumentatioun.
• Si sinn ähnlech zu engem Methodik an e Wee fir e komplexe System ze bauen.

Ressourcen fir weider ze goen

• Tokens an Design Systemer: 10 Tipps fir Architekten an Design Entscheedunge fir jiddereen ëmzesetzen: Liest hei 
• Design Tokens iwwer Faarwen, Typographie an Abstand: Liest hei

 

 

 

Alexandre Caillé, UI & Design System Lead bei UX-Republic