デザイン・トークンの実装
さまざまなプラットフォームや技術にまたがってデザイン・トークンを定義、管理、配布するための実践的な方法を学びます。
「デザイン・トークンの実装」はCoddyKit上の無料Design Systems & Component Librariesレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはDesign Systems & Component Libraries学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Design Systems & Component Librariesコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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-primarymaps tocolor-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!
よくある質問
「デザイン・トークンの実装」レッスンは無料ですか？
はい。「デザイン・トークンの実装」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Design Systems & Component Librariesコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Design Systems & Component Librariesコースには全4レッスンが含まれています。
「デザイン・トークンの実装」で何を学びますか？
さまざまなプラットフォームや技術にまたがってデザイン・トークンを定義、管理、配布するための実践的な方法を学びます。 ブラウザで直接実行するハンズオンコードでDesign Systems & Component Librariesを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Design Systems & Component Librariesを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのDesign Systems & Component Librariesは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「デザイン・トークンの実装」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このDesign Systems & Component Librariesレッスンでコードを書いて実行できますか？
はい。すべてのDesign Systems & Component Librariesレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。