Design Tokeni in avtomatizacija prehoda iz Figme v kodo korenito optimizirajo sodelovanje med oblikovalci in razvijalci, saj odpravljajo ročno prepisovanje kode ter komunikacijski šum. Za slovenska podjetja in razvojne ekipe ta napredni sistem predstavlja ključno naložbo, ki prinaša do 70 % prihranka časa ter popolno vizualno konsistenco pri razvoju kompleksnih digitalnih produktov.

Vsakdo, ki je kdaj sodeloval pri predaji dizajna v razvoj (design handoff), pozna ta scenarij: oblikovalec v Figmi posodobi primarno barvo blagovne znamke, spremeni debelino robov ali prilagodi razmike med elementi, razvijalec pa mora nato ročno pregledati na stotine vrstic CSS-a ali se zanašati na statično dokumentacijo. Rezultat so neizogibna vizualna odstopanja, podvojeno delo, neskončni popravki in komunikacijski šum med obema svetovoma. 

Dolga leta je bil proces predaje oblikovanja enosmerna ulica. Oblikovalci so v orodjih, kot so Photoshop, Sketch ali Figma, ustvarjali vizualne kompozicije, nato pa pripravili obsežne PDF-priročnike celostne grafične podobe (CGP) ali Figma povezave iz katerih so razvijalci sami morali razbirati fiksne vrednosti, kot so HEX-zapis barv: #0078D4, zaobljenost robov: border-radius:8px, senčenje elementov: box-shadow, in ostalo, ter jih ročno prepisovati v svojo izvorno kodo.

Kadar se digitalni produkt razvija na več platformah hkrati – na primer na spletnem SharePoint intranetu, mobilni aplikaciji v React Native, vsaka sprememba barvne sheme ali tipografije pomeni večdnevno usklajevanje. Tu vstopijo oblikovalski žetoni (Design Tokens), ki koncept stilov nadgradijo v agilno programsko arhitekturo.

Kaj sploh so Design Tokens?

Design Tokens niso zgolj preimenovane barve ali CSS-spremenljivke. So najmanjši atomi - delci oblikovalskega sistema, ki nosijo določeno oblikovalsko odločitev v platformno nevtralnem formatu (najpogosteje JSON ali YAML).

Troslojna arhitektura žetonov:

1. Globalni (Raw) žetoni: Absolutne vrednosti brez konteksta (npr. color.blue.500: #0078D4, space.4:16px).
2. Semantični (Alias) žetoni: Žetoni s pomenom in namenom (npr. color.background.primary: {color.neutral.50}, color.brand.action: {color.blue.500}). Omogočajo preprosto preklapljanje tem (Dark/Light Mode).
3. Komponentni žetoni: Specifične vezave za posamezen gradnik vmesnika (npr. button.primary.bg:{color.brand.action},  card.padding:{space.4}).

Primerjave takšnega zapisa (JSON > CSS)
Figma / Tokens Studio (JSON):
JSON
{
  "color": {
    "brand": {
      "action": { "$value": "{color.blue.500}" }
    }
  }
}

Samodejno generiran CSS (Front-end):
CSS
:root {
  --color-brand-action: #0078d4;
}

.pika-button-primary {
  background-color: var(--color-brand-action);
  padding: var(--space-4);
}

Avtomatizirana veriga: Od Figme do repozitorija

Prava moč žetonov se pokaže z vzpostavitvijo avtomatiziranega cevovoda (CI/CD za dizajn):

• Faza 1 (Definicija): Oblikovalec v orodju Figma prek Figma Variables ali Tokens Studio določi barve, razmike in semantične tokene.
• Faza 2 (Sinhronizacija): Vtičnik v Figmi samodejno potisne spremembe v obliki JSON-datoteke v GitHub/GitLab repozitorij (Pull Request).
• Faza 3 (Transformacija): Orodje (kot je na primer Amazon Style Dictionary) pretvori nevtralni JSON v ciljne formate: CSS/SCSS, TypeScript ter tematske datoteke za uporabo na SharePoint SPFx.
• Faza 4 (Distribucija): CI/CD objavi novo verzijo paketa (NPM), ki ga nato prevzamejo spletne in mobilne aplikacije.

Uporaba v praksi (SharePoint, M365 in Fluent UI)

V sodobnem Microsoftovem okolju (SharePoint, Teams, Fluent UI 2) žetoni omogočajo:

• Brezhibno podporo za temni način (Dark Mode): S preklopom semantičnih žetonov ostanejo vsi SPFx-gradniki kontrastni in berljivi brez podvajanja kode.
• Prilagajanje za več naročnikov (Multi-branding): Ista koda spletnih delov se z zamenjavo paketa žetonov takoj prilagodi barvni shemi različnih podjetij ali oddelkov.

Poslovni vpliv in AI

Uvedba avtomatiziranega sistema žetonov zahteva začetno investicijo v strukturo in orodja, vendar se povrnitev investicije (ROI) pokaže zelo hitro:

• Do 70 % manj časa za predajo dizajna: Odpravljeni so neskončni sestanki za usklajevanje heksakod in popravljanje vizualnih napak.
• Takojšnja globalna posodobitev: Sprememba celostne grafične podobe (rebranding), ki je včasih trajala mesece, se lahko izvede v nekaj dneh.
• Manj stresa in boljše sodelovanje: Oblikovalci dobijo neposreden nadzor nad vizualno konsistenco, razvijalci pa se lahko nemoteno posvetijo logiki, stabilnosti in odzivnosti sistema ali aplikacije.

Ker se v zadnjem času vse vrti okoli umetne inteligence (AI) ter njene implementacije vsepovsod, se uporaba te prav tako dotika tudi Design Tokens področja. Vloga AI pri Design Tokens se najbolj kaže v načinih kot so:

• Avtomatsko luščenje in strukturiranje: AI iz obstoječe kode ali zasnov samodejno prepozna barve, pisave in razmike ter jih uredi v semantični JSON-format.
• Nadzor nad dostopnostjo (WCAG): V realnem času preverja barvne kontraste za svetli in temni način ter samodejno popravlja neskladne odtenke.
• Takojšnje prevajanje v kodo: En sam nabor žetonov zanesljivo pretvori v specifične oblike za branje na spletu (CSS, Tailwind, React, Angular, SPFx) in mobilne platforme (Swift, Flutter, React Native).
• Čiščenje sistema (Design Linting): Zaznava napačne fiksne vrednosti (hardcoded piksle) v vmesnikih ter predlaga ustrezne uradne “default” žetone.

Zaključek

Prehod iz statičnih priročnikov v žive, z avtomatizacijo podprte Design Tokene je naravni evolucijski korak digitalnega oblikovanja. Za slovenska podjetja in razvojne ekipe, ki gradijo kompleksne digitalne produkte, aplikacije ali druge spletne rešitve, to pomeni konec improvizacije ter začetek pravega inženirskega partnerstva med oblikovanjem in kodo.

Aleš Frelih

UX/UI oblikovalec

ales.frelih@kompas-xnet.si

Imate dodatna vprašanja?

Za več informacij smo vam vedno z veseljem na voljo. Pišite nam na info@kompas-xnet.si ali nas pokličite 01 5136 990.