Menene token na zane?

Token na zane ƙima ce mai suna wadda ke ɗauke da zaɓin zane guda ɗaya, kamar launi, matakin tazara ko girman font, domin a sake amfani da wannan zaɓin a kayan aikin zane da cikin code, maimakon a rubuta shi da hannu a kowane wuri.

Me yasa za a sa wa ƙima suna

Ku yi tunanin launin da ake amfani da shi a manyan maɓallai. Idan aka rubuta shi kai tsaye, zai bayyana a matsayin #2563EB a fayil ɗin CSS, a matsayin filin hex a cikin fill na Figma, da kuma a matsayin rubutu a cikin duk abin da wani mai rubuta code ya rubuta makon jiya. Kwafi uku, babu wata alaƙa a tsakaninsu.

A matsayin token, yana bayyana sau ɗaya kawai, ƙarƙashin suna ɗaya:

--color-action-primary: #2563EB;

Duk sauran wurare suna nuni ga sunan. Ku canza ƙimar sau ɗaya, kuma duk inda ake amfani da ita zai canza. Wannan nuni ta hanyar suna shi ne ainihin ma'anar, kuma duk sauran abubuwan da suka shafi token daga nan suke.

Abin da token yawanci ke ƙunsa

  • Launi - jerin launuka, matakai, da ayyukan ma'ana kamar bango, iyaka, rubutu da matsayi
  • Salon rubutu - iyalan font, girma, kauri, tsayin layi, tazarar haruffa
  • Tazara - matakai masu daidaito, yawanci bisa 4px ko 8px
  • Lanƙwasar kusurwa da kaurin iyaka
  • Inuwa da ɗagawa
  • Motsi - tsawon lokaci da lanƙwasar sauyi (easing)
  • Breakpoint da girman shimfiɗa (layout)

Token ba variable ba ne

Bambancin yana da muhimmanci. Variable na CSS hanya ce ta fasaha. Token na zane kuwa zaɓi ne da ake bayyana shi ta hanyar variable.

Bambancin a aikace shi ne ɗaukuwa. Token yana nan ba tare da dogaro da wata fasaha guda ba, shi ya sa za a iya fitar da tarin token ɗaya a matsayin CSS custom properties, saitin Tailwind, variable na Figma, Swift ko Kotlin. Idan yana wanzuwa ne kawai a matsayin layin CSS, to variable ne.

Siffofin fayil

Ƙungiyar Design Tokens Community Group, ƙarƙashin W3C, na wallafa siffar JSON da aka tsara don zama hanyar musaya ta bai ɗaya tsakanin kayan aiki. Tana bai wa kowane token $value da $type:

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

Karɓuwarta ba ɗaya ba ce a ko'ina, amma tana ƙaruwa, kuma ita ce mafi kusa da siffar musaya ta tsaka-tsaki tsakanin kayan aikin zane da hanyoyin gina code (build pipelines).

Yadda wannan ya shafi Flash DSM

Flash DSM na ƙirƙirar cikakken tarin token daga prompt, adireshin gidan yanar gizo (URL), fayil na Figma ko hoton allo, sannan ya fitar da shi a matsayin CSS custom properties, saitin Tailwind, JSON na Tokens Studio ko variable na Figma.