Design tokens là gì?

Design tokens là các giá trị thiết kế cơ bản (colors, spacing, typography, shadows) được đặt tên và lưu trữ platform-agnostic, thường là JSON:

{ "color-primary": "#2563eb", "spacing-md": "16px" }

Tokens được transform sang CSS custom properties, SASS variables, hoặc JS objects — single source of truth cho design system. Khi designer thay đổi một token, tất cả platforms (web, iOS, Android) cập nhật theo.

Tools: Style Dictionary (Amazon), Figma Tokens plugin.

Design tokens are the fundamental design values (colors, spacing, typography, shadows, border-radius) that are named and stored in a platform-agnostic format, typically JSON.

Example: { "color-primary": "#2563eb", "spacing-md": "16px" }. These tokens are then transformed into platform-specific formats like CSS custom properties, SASS variables, or JavaScript objects — creating a single source of truth for an entire design system. When a designer updates a token value, all platforms (web, iOS, Android) update automatically. Popular tools for managing and building tokens include Style Dictionary (Amazon) and the Figma Tokens plugin.