Design Tokens：设计系统的 DNA

Design Tokens设计系统的 DNA让设计决策代码化让团队协作无缝化。一、什么是 Design Tokens作为一名把设计系统当作品来打磨的 UI 匠人我深知 Design Tokens 的价值。它们是设计系统中最小的可复用单元——颜色、字体、间距、圆角等——以代码的形式存在成为设计与开发之间的通用语言。二、Tokens 的层级结构1. 基础 Tokens原始值{ color: { base: { black: { value: #000000 }, white: { value: #ffffff }, gray: { 100: { value: #f7fafc }, 200: { value: #edf2f7 }, 300: { value: #e2e8f0 }, 400: { value: #cbd5e0 }, 500: { value: #a0aec0 }, 600: { value: #718096 }, 700: { value: #4a5568 }, 800: { value: #2d3748 }, 900: { value: #1a202c } }, blue: { 500: { value: #4299e1 }, 600: { value: #3182ce } } } }, font: { size: { xs: { value: 0.75rem }, sm: { value: 0.875rem }, base: { value: 1rem }, lg: { value: 1.125rem }, xl: { value: 1.25rem }, 2xl: { value: 1.5rem } } }, space: { 1: { value: 0.25rem }, 2: { value: 0.5rem }, 3: { value: 0.75rem }, 4: { value: 1rem }, 5: { value: 1.25rem }, 6: { value: 1.5rem }, 8: { value: 2rem }, 10: { value: 2.5rem }, 12: { value: 3rem } } }2. 语义 Tokens用途定义{ color: { semantic: { background: { primary: { value: {color.base.white} }, secondary: { value: {color.base.gray.100} }, tertiary: { value: {color.base.gray.200} } }, text: { primary: { value: {color.base.gray.900} }, secondary: { value: {color.base.gray.600} }, tertiary: { value: {color.base.gray.400} } }, border: { default: { value: {color.base.gray.300} }, focus: { value: {color.base.blue.500} } }, action: { primary: { background: { value: {color.base.blue.500} }, text: { value: {color.base.white} }, hover: { value: {color.base.blue.600} } } } } } }3. 组件 Tokens具体应用{ component: { button: { primary: { background: { value: {color.semantic.action.primary.background} }, text: { value: {color.semantic.action.primary.text} }, padding: { value: {space.3} {space.6} }, border-radius: { value: 0.375rem }, font-size: { value: {font.size.base} } } }, card: { background: { value: {color.semantic.background.primary} }, border: { value: 1px solid {color.semantic.border.default} }, border-radius: { value: 0.75rem }, padding: { value: {space.6} }, shadow: { value: 0 4px 6px -1px rgba(0, 0, 0, 0.1) } } } }三、CSS 自定义属性实现:root { /* Base Colors */ --color-base-black: #000000; --color-base-white: #ffffff; --color-base-gray-100: #f7fafc; --color-base-gray-500: #a0aec0; --color-base-gray-900: #1a202c; --color-base-blue-500: #4299e1; --color-base-blue-600: #3182ce; /* Semantic Colors */ --color-background-primary: var(--color-base-white); --color-background-secondary: var(--color-base-gray-100); --color-text-primary: var(--color-base-gray-900); --color-text-secondary: var(--color-base-gray-500); --color-action-primary-background: var(--color-base-blue-500); --color-action-primary-hover: var(--color-base-blue-600); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; /* Typography */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; /* Component Specific */ --button-primary-padding: var(--space-3) var(--space-6); --button-primary-border-radius: 0.375rem; --card-padding: var(--space-6); --card-border-radius: 0.75rem; } /* Dark Mode */ [data-themedark] { --color-background-primary: var(--color-base-gray-900); --color-background-secondary: var(--color-base-gray-800); --color-text-primary: var(--color-base-white); --color-text-secondary: var(--color-base-gray-400); }四、Flutter 中的 Design Tokens// lib/tokens/colors.dart import package:flutter/material.dart; class AppColors { // Base static const Color baseBlack Color(0xFF000000); static const Color baseWhite Color(0xFFFFFFFF); static const Color baseGray100 Color(0xFFF7FAFC); static const Color baseGray900 Color(0xFF1A202C); static const Color baseBlue500 Color(0xFF4299E1); // Semantic - Light static const Color backgroundPrimary baseWhite; static const Color backgroundSecondary baseGray100; static const Color textPrimary baseGray900; static const Color actionPrimaryBackground baseBlue500; // Semantic - Dark static Color get darkBackgroundPrimary baseGray900; static Color get darkTextPrimary baseWhite; } // lib/tokens/spacing.dart class AppSpacing { static const double space1 4.0; static const double space2 8.0; static const double space3 12.0; static const double space4 16.0; static const double space6 24.0; static const double space8 32.0; } // lib/tokens/typography.dart class AppTypography { static const String fontFamily Inter; static const TextStyle heading1 TextStyle( fontFamily: fontFamily, fontSize: 32, fontWeight: FontWeight.bold, height: 1.2, ); static const TextStyle body TextStyle( fontFamily: fontFamily, fontSize: 16, fontWeight: FontWeight.normal, height: 1.5, ); }五、Token 管理工具1. Style Dictionary// config.json { source: [tokens/**/*.json], platforms: { css: { transformGroup: css, buildPath: build/css/, files: [{ destination: variables.css, format: css/variables }] }, flutter: { transformGroup: flutter, buildPath: build/flutter/, files: [{ destination: tokens.dart, format: flutter/class.dart }] } } }六、最佳实践命名规范使用清晰、一致的命名约定版本控制Tokens 应该纳入版本管理文档化每个 Token 都应该有明确的用途说明自动化使用工具自动生成各平台的代码Tokens 是设计与代码的桥梁让创意可以无损地传递到用户手中。#design-tokens #design-system #css #flutter #frontend