Designsystem och komponentbibliotek · Lektion

Implementera designtokens

Lär Er praktiska metoder för att definiera, hantera och distribuera designtokens på olika plattformar och med olika tekniker.

Lektion 2 av 412 steg

Implementera designtokens är en gratis lektion i Designsystem och komponentbibliotek på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Designsystem och komponentbibliotek, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Tokens: från design till kod

Välkommen till Implementera designtokens! I den föregående lektionen lärde vi oss vad designtokens är. Nu blir det praktiskt!

I den här lektionen får ni se hur tokens definieras, hanteras och distribueras så att de kan användas på olika plattformar, till exempel i webb- och mobilappar.

Definiera era kärntokens

Designtokens definieras vanligtvis i ett strukturerat och lättläst format, oftast JSON eller YAML. Den här centrala källan fungerar som den enda sanningskällan för alla designvärden.

Här är ett enkelt exempel på hur ni kan definiera centrala färgtokens:

{  "color": {    "brand": {      "primary": "#007bff",      "secondary": "#6c757d"    },    "text": {      "default": "#333333",      "subtle": "#666666"    }  }}

Kategorisera tokens: primitiver och semantik

Tokens kategoriseras ofta för att förbättra organisation och underhållbarhet:

Primitiva tokens: Abstrakta värden på låg nivå (till exempel color-blue-500 och spacing-16px).
Semantiska tokens (alias): Kontextuella värden som hänvisar till primitiva tokens (till exempel att color-brand-primary mappar till color-blue-500).

Semantiska tokens gör det enklare att uppdatera teman eller reagera på förändringar i varumärket.

Exempel: mappning från primitiv till semantisk

Se hur en semantisk token som color-background-default använder den primitiva tokenen color-neutral-0. Det skapar ett flexibelt system.

{  "color": {    "neutral": {      "0": "#ffffff",      "100": "#f8f9fa"    },    "background": {      "default": {        "value": "{color.neutral.0}"      },      "subtle": {        "value": "{color.neutral.100}"      }    }  }}

Hantera tokenkällan

När dessa källfiler har definierats behöver de lagras någonstans. Vanliga metoder är:

Versionshantering: Lagra tokens i ett Git-arkiv tillsammans med koden för designsystemet.
Dedikerade verktyg: Använd specialiserade plattformar för tokenhantering som erbjuder användargränssnitt för designers och API-åtkomst för utvecklare.

Det säkerställer en enda sanningskälla och tydlig versionshantering.

Distribuera till webben: CSS-variabler

I webbapplikationer omvandlas designtokens vanligtvis till CSS Custom Properties (även kallade CSS-variabler). De kan sedan användas direkt i era stilmallar.

Det möjliggör dynamisk temahantering och enkla uppdateringar i alla era webbkomponenter.

Exempel på användning av tokens på webben

Så här kan genererade CSS-variabler se ut och användas:

:root {
  --color-brand-primary: #007bff;
  --color-text-default: #333333;
}

.button {
  background-color: var(--color-brand-primary);
  color: var(--color-text-default);
  padding: 8px 16px;
}

Distribution till native: plattformsspecifika filer

För mobila native-appar (iOS, Android) omvandlas tokens till plattformsspecifika filer. Det kan vara:

Android: XML-resurser (colors.xml, dimens.xml).
iOS: Swift-filer (strukturer, enum-typer) eller Objective-C-headerfiler.

Dessa filer importeras sedan och används i den inhemska kodbasen.

Exempel på användning av native-token (Android)

En Android-colors.xml-fil som genererats från tokens:

<!-- res/values/colors.xml -->
<resources>
    <color name="brand_primary">#007bff</color>
    <color name="text_default">#333333</color>
</resources>

<!-- In Kotlin/Java code: -->
// textView.setTextColor(ContextCompat.getColor(context, R.color.text_default))

Verktyg för token-transformering

Att manuellt konvertera tokens för varje plattform är tidskrävande. Det är här verktyg för token-transformering kommer till sin rätt!

Verktyg som Style Dictionary eller Theo automatiserar processen. De tar emot er enda källfil i JSON/YAML, tillämpar transformeringar och genererar plattformsspecifik kod (CSS, XML, Swift, JS med mera).

Det säkerställer enhetlighet och sparar mycket utvecklingstid.

Testa er förståelse

Ni har lärt er hur designtokens definieras, kategoriseras och distribueras till olika plattformar. Nu testar vi era kunskaper.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Ert tokenverktyg

Bra jobbat! Nu förstår ni de praktiska stegen för att implementera designtokens:

Tokens definieras i strukturerade format som JSON.
Kategorisera tokens som primitiva eller semantiska typer.
Hantera tokens i versionshantering eller dedikerade verktyg.
Distribuera tokens till webben (CSS-variabler) och native-plattformar (XML, Swift).
Använd transformeringverktyg för att automatisera genereringen.

Den här processen säkerställer konsekvent design och effektivitet i alla era produkter!

Gratis att börja

Lär dig Designsystem och komponentbibliotek med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Implementera designtokens” gratis?

Ja – hela texten till ”Implementera designtokens” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Designsystem och komponentbibliotek, kan Ni uppgradera till CoddyKit PRO. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Vad lär jag mig i ”Implementera designtokens”?

Lär Er praktiska metoder för att definiera, hantera och distribuera designtokens på olika plattformar och med olika tekniker. Ni övar på Designsystem och komponentbibliotek med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Designsystem och komponentbibliotek?

Du behöver inga förkunskaper. Utbildningen i Designsystem och komponentbibliotek på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Implementera designtokens”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Designsystem och komponentbibliotek-lektionen?

Ja. Varje Designsystem och komponentbibliotek-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Vad är designtokens?
Implementera designtokens
Automatisera arbetsflöden från design till kod
Namngivning av tokens och arkitektur i flera tokenlager

← Tillbaka till Designsystem och komponentbibliotek