piofinn
commented
6 days ago Noen tanker etter første gjennomgang (og litt research)
Det kan kanskje hjelpe oss i navngiving og organisering hvis vi ser på tokens som tilhørende forskjellige "klasser". Vi gjør på en måte allerede dette med base-variablene våre (f.eks. grunnskalaer for farger), men det kan være fornuftig å også dele inn litt mer, for eksempel med en klasse for komponentvariabler (som jo er de vi slet mest med). Material Design angir disse klassene som reference, system og component, der component arver fra system som igjen arver fra reference.
Grunnen til at jeg tenker slike klasser vil kunne hjelpe oss handler om hvordan vi finner de forskjellige spesifisitetsnivåene i tokens. Ved å skille på klassene kan vi finne nivåer som gir mening for hver enkelt klasse. Her er hvordan man kunne sett for seg å kategorisere spesifisitet i de forskjellige klassene, med noen eksempler på verdier:
Referanse-tokens
- Kategori:
color,spacing,radius,typography - Variant:
neutral,font-size,line-height - Steg/verdi:
0,4,32,50,99,bold
kategori-(variant)-steg/verdi: color-neutral-99, typography-font-weight-bold, spacing-40
System-tokens (semantiske roller)
- Kategori:
color,spacing,elevation - Egenskap:
background,text - Konsept:
page,primary,action,on-alert - Variant:
default,subdued,high,xs,xxl - Tilstand:
hover,disabled
kategori-(egenskap)-(konsept)-variant-(tilstand):
color-background-action-hover, elevation-high, spacing-xxl, color-text-on-action
Komponent-tokens
- Komponent:
button,table-cell,expander,card - Variant:
ghost,outlined - Del (?):
heading,icon - Egenskap:
background,font-weight,padding,gap - Tilstand:
hover,disabled,open
komponent-(variant)-(del)-egenskap-(tilstand): button-ghost-background-hover, expander-heading-font-weight-open
Dette er selvfølgelig bare noen forslag, men tenkte at det kunne hjelpe oss litt med organiseringen, både i hodene våre og rent praktisk 😊
Vi bør sørge for at navngiving variabler følger et konsekvent mønster på tvers av Figma og i kode.
Dette sørger for at vi har en konsekvent måte å lage navn på verdier i både kode og i Figma. Dermed får vi fullt utbytte av funksjonalitet i Figma slik som autogenererte CSS-variabler i kodeeksemplene i Dev Mode:
Navngivingen bør følge et hierarkisk mønster, representert ved grupper i Figma og nøstede elementer i tokens-fila i kode. Det finnes gode ressurser for å finne en strategi for navngiving, men de fleste koker ned til noe á la
<kategori>-<egenskap>-<variant>-<steg/modus/state>. Et godt utgangspunkt er Vitaly Friedman's Smart Interface Design Patterns, og Nathan Curtis har en mer inngående gjennomgang.De fleste av våre tokens er allerede navngitt ganske godt ved at det går fra generelt til spesifikt, men det er en del inkonsekvens i nivået på "stegene" og litt diverse bruk av store bokstaver etc.