Semanttisen suunnittelun merkkiarkkitehtuuri: globaalit, semanttiset ja komponenttitunnukset
Suunnittelutunnuksien jäsentäminen kolmeen tasoon, teemojen ja useiden tuotemerkkien tukeminen ja niiden lähettäminen verkkoon, iOS ja Android käyttämällä W3C DTCG -muotoa.
Core Takeaway
Useimmat kypsät suunnittelujärjestelmät käyttävät kolmea tunnistetasoa: globaaleja (raaka-arvot, kuten blue-600), semanttisia (tarkoitus, kuten color.action.primary) ja komponentteja (tietty käyttö, kuten button.background). Komponentit viittaavat semanttisiin tunnuksiin, semanttiset tunnukset globaaleihin ja teemat tai tuotemerkit vaihtavat vain semanttista kerrosta. Tallenna ne W3C DTCG -muodossa ja luo alustakoodi rakennustyökalulla.
Kolme tasoa
Material Design kuvaa kolme tunnisteluokkaa: viite, järjestelmä ja komponentti. Monet tiimit kutsuvat niitä globaaleiksi, semanttisiksi ja komponenteiksi. Nimet vaihtelevat, mutta idea on sama: erota raaka-arvot niiden käyttöä koskevista päätöksistä.
- Globaali (viite): kaikki järjestelmän raaka-arvot, kuten sininen-600, välilyönti-4, fontin koko-16, jousiherkkä.
- Semanttinen (järjestelmä): mihin arvo on tarkoitettu, kuten color.text.primary, color.action.primary, motion.enter.
- Komponentti: miten yksi komponentti käyttää järjestelmää, kuten button.background tai dialog.motion.open.
Miksi semanttisilla tunnuksilla on merkitystä
Jos painike käyttää suoraan blue-600:aa, jokainen teeman muutos tarkoittaa jokaisen komponentin muokkaamista. Jos se käyttää color.action.primary, tumma tila, suuri kontrasti tai uusi tuotemerkki, muuta vain sitä, mihin color.action.primary osoittaa. Materiaali huomauttaa, että tokenit mahdollistavat korkeakontrastisen paletin käyttämisen tai tyyppiasteikon muuttamisen järjestelmän laajuisesti juuri tällä tavalla.
Teemoja ja useita merkkejä
Säilytä usean tuotemerkin tai valkoisen etiketin tuotteissa yksi sarja semanttisia ja komponenttitunnuksia ja yksi globaali paletti brändiä kohden. Jokainen teema on kartoitus semanttisista tokeneista globaaleihin arvoihin. Ensimmäinen vakaa versio W3C Design Tokens -spesifikaatiosta (2025.10), joka julkaistiin lokakuussa 2025, lisäsi teeman ja usean tuotemerkin tuen, modernit väritilat, kuten Display P3 ja OKLCH, sekä aliakset ja komponenttitason viittaukset.
Liiketunnukset kuuluvat myös tänne
Kestoajat, helpotuskäyrät ja jouset noudattavat samoja tasoja. Globaali merkki saattaa olla jousen hellävarainen jäykkyytensä ja vaimennuksensa kanssa; semanttinen merkkiliike.enter osoittaa siihen; komponenttitunniste sheet.motion.open osoittaa liikkeen.enteriin. Lisää supistettu liiketeema, joka yhdistää liiketunnisteet lyhyisiin häivytyksiin.
Tokenien toimitus jokaiselle alustalle
Säilytä tokeneita arkistossa nimellä DTCG JSON, ainoa totuuden lähde. Rakennustyökalu, kuten Style Dictionary, muuntaa ne CSS-muuttujiksi, Swift-, Kotlin-, Flutter- tai muihin muotoihin. Suunnittelutyökalut, jotka lukevat samaa muotoa, voivat pysyä synkronoituna, ja AI-koodaustyökalut voivat lukea JSON:n suoraan.
- Totuuden lähde: DTCG JSON Gitissä, tarkistettu kuten koodi
- Rakenna: Muunna jokaiselle alustalle jokaisessa muutoksessa
- Suunnittelutyökalun synkronointi: tuonti tai laajennus, ei koskaan käsin kopioituja arvoja
- Nukkaus: kielletä raaka-arvot komponenteissa
Avain Principles muistettavat
- Kolme tasoa: globaali (arvot), semanttinen (tarkoitus), komponentti (käyttö)
- Komponentit viittaavat semanttisiin tokeneihin, eivät koskaan raaka-arvoihin
- Teemat ja tuotemerkit muokkaavat semanttista kerrosta
- W3C DTCG -muoto saavutti ensimmäisen vakaan versionsa (2025.10) lokakuussa 2025
- Sisällytä liiketokeneja ja rajoitettu liiketeema
Usein kysytyt kysymykset
Lähteet
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C Design Tokens Community Group
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com