Tasarım Belirteçlerini Uygulama
Tasarım belirteçlerini farklı platformlar ve teknolojiler arasında tanımlamak, yönetmek ve dağıtmak için pratik yöntemler öğrenin.
Tasarım Belirteçlerini Uygulama, CoddyKit'te ücretsiz bir Design Systems & Component Libraries dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Design Systems & Component Libraries öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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!
Sıkça Sorulan Sorular
“Tasarım Belirteçlerini Uygulama” dersi ücretsiz mi?
Evet — “Tasarım Belirteçlerini Uygulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Design Systems & Component Libraries kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.
“Tasarım Belirteçlerini Uygulama” dersinde ne öğreneceğim?
Tasarım belirteçlerini farklı platformlar ve teknolojiler arasında tanımlamak, yönetmek ve dağıtmak için pratik yöntemler öğrenin. Design Systems & Component Libraries ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Design Systems & Component Libraries öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Design Systems & Component Libraries, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Tasarım Belirteçlerini Uygulama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Design Systems & Component Libraries dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Design Systems & Component Libraries dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tasarım Belirteçleri Nedir
- Tasarım Belirteçlerini Uygulama
- Tasarımdan Koda İş Akışlarını Otomatikleştirme
- Belirteç Adlandırma ve Katmanlı Belirteç Mimarisi