使用样式字典确保设计标记的互连

如何使用样式字典维护设计标记中的层次结构

基于 JavaScript 的解决方案，利用样式字典进行设计令牌管理

// Import the Style Dictionary package
const StyleDictionary = require('style-dictionary');

// Define the custom transform to maintain token hierarchy
StyleDictionary.registerTransform({
  name: 'custom/name-hierarchy',
  type: 'name',
  transformer: (token) => {
    return [token.attributes.category, token.attributes.type, token.attributes.item]
      .filter(Boolean)
      .join('.');
  }
});

// Define the custom format for interconnected design tokens
StyleDictionary.registerFormat({
  name: 'custom/json-structured',
  formatter: ({ dictionary }) => {
    return JSON.stringify(dictionary.tokens, null, 2);
  }
});

// Configure Style Dictionary with your custom settings
const StyleDictionaryConfig = {
  source: ['tokens//*.json'],
  platforms: {
    web: {
      transformGroup: 'custom/name-hierarchy',
      buildPath: 'build/web/',
      files: [{
        destination: 'tokens.json',
        format: 'custom/json-structured'
      }]
    }
  }
};

// Extend and build the Style Dictionary
const SD = StyleDictionary.extend(StyleDictionaryConfig);
SD.buildAllPlatforms();

使用 Python 验证和导出互连的设计令牌

一种基于 Python 的方法，用于在保留层次结构的同时处理 JSON 设计标记

import json

# Load design tokens from a JSON file
with open('tokens.json', 'r') as file:
    tokens = json.load(file)

# Function to recursively maintain hierarchy
def maintain_hierarchy(data):
    structured_tokens = {}
    for key, value in data.items():
        if isinstance(value, dict):
            structured_tokens[key] = maintain_hierarchy(value)
        else:
            structured_tokens[key] = value
    return structured_tokens

# Process tokens to maintain hierarchy
structured_tokens = maintain_hierarchy(tokens)

# Export processed tokens to a new JSON file
with open('structured_tokens.json', 'w') as file:
    json.dump(structured_tokens, file, indent=2)

使用单元测试测试设计令牌编译

基于 JavaScript 的单元测试，用于验证样式词典的输出

const fs = require('fs');
const { expect } = require('chai');

// Load the compiled tokens
const tokens = JSON.parse(fs.readFileSync('build/web/tokens.json', 'utf-8'));

describe('Design Token Compilation', () => {
  it('should preserve the hierarchy in tokens', () => {
    expect(tokens.semantic).to.have.property('primary');
    expect(tokens.semantic.primary).to.equal(tokens.primitive.colorBlue);
  });

  it('should include all levels of tokens', () => {
    expect(tokens).to.have.property('primitive');
    expect(tokens).to.have.property('semantic');
    expect(tokens).to.have.property('specific');
  });
});

互连设计令牌常见问题解答

1. 什么是设计令牌层次结构？
2. 层次结构涉及将标记结构化为原始、语义和特定等级别。例如，语义标记 "button.primary" 可能引用一个原始标记 "color.blue-500"。
3. 自定义转换在样式词典中如何工作？
4. 自定义转换，创建于 StyleDictionary.registerTransform，定义如何处理标记，例如将类别和类型等属性组合成分层名称。
5. 样式词典支持哪些格式？
6. 样式词典支持 JSON、CSS 和特定于平台的输出。开发人员可以定义自定义格式 StyleDictionary.registerFormat 以满足他们的需求。
7. 为什么语义标记很重要？
8. 语义标记如 "text.primary" 提供一个抽象层，允许对原始标记进行更改，例如 "color.black" 不改变所有依赖样式。
9. 设计令牌可以与版本控制集成吗？
10. 是的，将令牌存储在存储库中可以实现协作和跟踪。使用 CI/CD 进行自动化构建可确保令牌跨平台保持一致。

代币管理的有效技术

确保互连设计令牌的正确结构对于现代设计系统的一致性至关重要。通过利用诸如 风格词典，开发人员可以创建无缝工作流程，在导出过程中保留令牌层次结构。这些方法可以节省时间并减少实施错误。 😊

自定义格式和集成 CI/CD 管道可增强可扩展性和跨平台兼容性。无论是在 Web 还是本机应用程序上工作，这些方法都使团队能够维护可靠、灵活的系统。专注于自动化流程和清晰的配置为稳健的设计令牌管理奠定了基础。