Arhitectura de jetoane de design semantic: jetoane globale, semantice și componente
Cum să structurați jetoanele de proiectare în trei niveluri, să susțineți teme și mai multe mărci și să le expediați pe web, iOS și Android utilizând formatul W3C DTCG.
Core Takeaway
Cele mai multe sisteme de proiectare mature folosesc trei niveluri de jetoane: globale (valori brute, cum ar fi albastru-600), semantice (scop, cum ar fi color.action.primary) și componente (utilizări specifice, cum ar fi buton.background). Componentele fac referire la jetoane semantice, jetoanele semantice se referă la cele globale, iar temele sau mărcile schimbă doar stratul semantic. Stocați-le în formatul W3C DTCG și generați codul platformei cu un instrument de compilare.
Cele trei niveluri
Material Design descrie trei clase de jetoane: referință, sistem și componentă. Multe echipe le numesc globale, semantice și componente. Numele diferă, dar ideea este aceeași: separați valorile brute de deciziile despre modul în care sunt utilizate.
- Global (referință): fiecare valoare brută din sistem, cum ar fi blue-600, space-4, font-size-16, spring-blend.
- Semantic (sistem): pentru ce este o valoare, cum ar fi color.text.primary, color.action.primary, motion.enter.
- Componentă: modul în care o componentă folosește sistemul, cum ar fi butonul.background sau dialog.motion.open.
De ce contează jetoanele semantice
Dacă un buton folosește direct blue-600, fiecare schimbare de temă înseamnă editarea fiecărei componente. Dacă folosește color.action.primary, modul întunecat, contrast ridicat sau o marcă nouă, schimbați doar ce anume indică culoarea.action.primary. Materialul notează că jetoanele fac posibilă aplicarea unei palete cu contrast ridicat sau modificarea scalei de tip la nivelul întregului sistem exact în acest mod.
Teme și mărci multiple
Pentru produsele cu mai multe mărci sau cu etichetă albă, păstrați un set de simboluri semantice și componente și o paletă globală pentru fiecare marcă. Fiecare temă este o mapare de la jetoane semantice la valori globale. Prima versiune stabilă a specificației W3C Design Tokens (2025.10), lansată în octombrie 2025, a adăugat tematică și suport pentru mai multe mărci, spații de culoare moderne precum Display P3 și OKLCH și aliasuri și referințe la nivel de componente.
Jetoanele de mișcare aparțin și aici
Duratele, curbele de relaxare și arcurile urmează aceleași niveluri. Un simbol global ar putea fi blând cu arcul prin rigiditatea și amortizarea sa; o mișcare jetonă semantică.enter indică spre ea; o foaie de jetoane componentă.mișcare.puncte deschise către mișcare.introduceți. Adăugați o temă cu mișcare redusă care remapează jetoanele de mișcare la fade scurte.
Livrare jetoane pe fiecare platformă
Păstrați jetoanele într-un depozit ca DTCG JSON, sursa unică a adevărului. Un instrument de compilare, cum ar fi Style Dictionary, le transformă în variabile CSS, Swift, Kotlin, Flutter sau alte formate. Instrumentele de proiectare care citesc același format pot rămâne sincronizate, iar instrumentele de codare AI pot citi JSON direct.
- Sursa adevărului: DTCG JSON în Git, revizuit ca cod
- Construiți: transformați pe fiecare platformă la fiecare schimbare
- Sincronizare instrument de proiectare: import sau plugin, valori niciodată copiate manual
- Listing: interziceți valorile brute în componente
Cheie Principles de reținut
- Trei niveluri: global (valori), semantic (scop), component (utilizare)
- Componentele fac referire la token-uri semantice, niciodată la valori brute
- Temele și mărcile remapează stratul semantic
- Formatul W3C DTCG a ajuns la prima versiune stabilă (2025.10) în octombrie 2025
- Includeți jetoane de mișcare și o temă cu mișcare redusă
Întrebări frecvente
Surse
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Grupul comunitar W3C Design Tokens
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com