0Pricing
Design Systems & Component Libraries · Lekcja

Wdrażanie tokenów projektowych

Poznaj praktyczne metody definiowania, zarządzania i dystrybuowania tokenów projektowych na różnych platformach i w różnych technologiach.

Wdrażanie tokenów projektowych to bezpłatna lekcja Design Systems & Component Libraries na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Design Systems & Component Libraries, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Design Systems & Component Libraries zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Tokens: Bringing Designs to Code

Welcome to Implementing Design Tokens! In the previous lesson, we learned what design tokens are. Now, let's get practical!

This lesson will show you how to define, manage, and distribute tokens so they can be used across different platforms like web and mobile apps.

Defining Your Core Tokens

Design tokens are typically defined in a structured, human-readable format, most commonly JSON or YAML. This central source acts as the single truth for all design values.

Here's a simple example of how you might define core color tokens:

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

Categorizing Tokens: Primitives & Semantics

Tokens are often categorized to improve organization and maintainability:

  • Primitive Tokens: Low-level, abstract values (e.g., color-blue-500, spacing-16px).
  • Semantic Tokens (Alias): Contextual values that refer to primitive tokens (e.g., color-brand-primary maps to color-blue-500).

Using semantic tokens makes it easier to update themes or respond to brand changes.

Example: Primitive to Semantic Mapping

See how a semantic token like color-background-default uses a primitive token color-neutral-0. This creates a flexible system.

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

Managing Your Token Source

Once defined, these source files need a home. Common practices include:

  • Version Control: Storing tokens in a Git repository alongside your design system code.
  • Dedicated Tools: Using specialized token management platforms that offer UIs for designers and API access for developers.

This ensures a single source of truth and clear versioning.

Distributing to Web: CSS Variables

For web applications, design tokens are commonly transformed into CSS Custom Properties (also known as CSS Variables). These can then be directly used in your stylesheets.

This allows for dynamic theming and easy updates across your web components.

Web Token Usage Example

Here's how generated CSS variables might look and how they'd be used:

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

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

Distributing to Native: Platform-Specific Files

For native mobile apps (iOS, Android), tokens are transformed into platform-specific files. This could be:

  • Android: XML resources (colors.xml, dimens.xml).
  • iOS: Swift files (structs, enums) or Objective-C headers.

These files are then imported and used in the native codebase.

Native Token Usage Example (Android)

An Android colors.xml file generated from 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))

Token Transformation Tools

Manually converting tokens for every platform is tedious. This is where token transformation tools shine!

Tools like Style Dictionary or Theo automate this process. They take your single source JSON/YAML, apply transformations, and generate platform-specific code (CSS, XML, Swift, JS, etc.).

This ensures consistency and saves a lot of development time.

Check Your Understanding

You've learned how design tokens are defined, categorized, and distributed across different platforms. Let's test your knowledge.

Recap: Your Token Toolkit

Great job! You now understand the practical steps of implementing design tokens:

  • Tokens are defined in structured formats like JSON.
  • Categorize tokens into primitive and semantic types.
  • Manage tokens in version control or dedicated tools.
  • Distribute tokens to web (CSS variables) and native platforms (XML, Swift).
  • Use transformation tools to automate generation.

This process ensures design consistency and efficiency across all your products!

Często zadawane pytania

Czy lekcja „Wdrażanie tokenów projektowych” jest bezpłatna?

Tak — pełny tekst „Wdrażanie tokenów projektowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Design Systems & Component Libraries, przejdź na CoddyKit PRO. Kurs Design Systems & Component Libraries zawiera 4 lekcji w sumie.

Co nauczysz się w „Wdrażanie tokenów projektowych”?

Poznaj praktyczne metody definiowania, zarządzania i dystrybuowania tokenów projektowych na różnych platformach i w różnych technologiach. Ćwiczysz Design Systems & Component Libraries z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Design Systems & Component Libraries?

Nie wymagamy żadnego doświadczenia. Design Systems & Component Libraries w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wdrażanie tokenów projektowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Design Systems & Component Libraries?

Tak. Każda lekcja Design Systems & Component Libraries zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Czym są tokeny projektowe
  2. Wdrażanie tokenów projektowych
  3. Automatyzacja przepływów projektowanie–kod
  4. Nazewnictwo tokenów i warstwowa architektura tokenów
← Powrót do Design Systems & Component Libraries