Frontend Academy · Oppitunti

Suunnittelutokenit Style Dictionarylla

Määritä väri-, välistys- ja typografiatokenit JSON-muodossa ja muunna ne Style Dictionarylla CSS-muuttujiksi, JavaScript-vakioiksi tai iOS-/Android-muodoiksi.

Oppitunti 2/414 vaihetta

Suunnittelutokenit Style Dictionarylla on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä design-tokenit ovat

Design-tokenit ovat suunnittelujärjestelmän nimettyjä perustason arvoja: värejä, välistyksiä, fonttikokoja, reunojen pyöristyksiä ja varjoja. Ne ovat totuuden lähde — jokainen komponentti muodostaa tyylinsä niiden pohjalta.

Miksi tokeneilla on merkitystä

Tokenit irrottavat suunnittelupäätökset toteutuksesta. Vaihda color.primary sinisestä vihreäksi kerran, niin jokainen sitä käyttävä komponentti päivittyy. Niiden avulla voit myös julkaista saman suunnittelun webille, iOS:lle ja Androidille.

Tokenien tallennus

Tallenna tokenit JSON- tai YAML-muodossa — kyseessä on neutraali muoto, jota eri alustojen työkalut voivat käyttää. JSON on yleisin vaihtoehto.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) on design-tokenien de facto -build-työkalu. Se lukee tokenit ja muuntaa ne useisiin tulostemuotoihin: CSS-muuttujiksi, SCSS:ksi, JS-vakioiksi, iOS Swiftiksi ja Android XML:ksi.

npm install -D style-dictionary

Määritys

Luo tiedosto style-dictionary.config.js kuvaamaan syötetokenit ja tulostusalustat.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Buildin suorittaminen

Suorita CLI, jotta tulosteet syntyvät kaikille alustoille.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Luotu CSS-tuloste

CSS-muuttujat yhdenmukaisella nimeämiskäytännöllä (kebab-case ja nimiavaruus).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Luotu JS-tuloste

JS-objekti käytettäväksi JS/TS-koodissa (Tailwind-määritys, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Tokenien nimeämiskäytännöt

Käytä semanttisia nimiä (color.primary) kirjaimellisten nimien (color.blue-500) sijaan. Semanttisten tokenien avulla voit vaihtaa arvoja nimeämättä niitä uudelleen. Kaksitasoinen järjestelmä: kirjaimellinen paletti (blue-500) → semanttinen alias (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Teemojen määrittäminen tokeneilla

Tue teemoja (vaalea/tumma) rakentamalla eri syötteillä useita kohteita — nimet pysyvät samoina, arvot vaihtuvat.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Tokeniluokat

Yleisiä luokkia ovat color, spacing, typography (font-family, size, line-height, weight), border (radius, width), shadow, transition (duration, easing), z-index ja breakpoint.

Tokenirekisterityökalut

Style Dictionaryn lisäksi käytettävissä ovat Tokens Studio (Figma-lisäosa), Specify ja Supernova. Niiden avulla suunnittelijat voivat hallita tokeneita Figmassa ja synkronoida ne automaattisesti koodikantaan.

Pikatarkistus

Mikä on design-tokenien ja Style Dictionaryn käytön tärkein hyöty?

Vastaa interaktiivisessa oppitunnissa

Kertaus: design-tokenit

Tokenit ovat nimettyjä perustason arvoja (väri, välistys, typografia) — suunnittelujärjestelmän totuuden lähde. Tallenna ne JSON-muodossa. Style Dictionary muuntaa ne CSS-muuttujiksi, JS:ksi, iOS:lle ja Androidille. Suosi semanttista nimeämistä (primary) kirjaimellisen (blue-500) sijaan. Kaksitasoinen rakenne: paletti → semanttinen alias. Teemat erillisillä buildeilla. Synkronoi Figmasta Tokens Studion avulla.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Suunnittelutokenit Style Dictionarylla” ilmainen?

Kyllä – oppitunnin ”Suunnittelutokenit Style Dictionarylla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Suunnittelutokenit Style Dictionarylla”?

Määritä väri-, välistys- ja typografiatokenit JSON-muodossa ja muunna ne Style Dictionarylla CSS-muuttujiksi, JavaScript-vakioiksi tai iOS-/Android-muodoiksi. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Suunnittelutokenit Style Dictionarylla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Frontend Academy