스타일 사전으로 상호 연결된 디자인 토큰 보장

스타일 사전을 사용하여 디자인 토큰의 계층 구조를 유지하는 방법

디자인 토큰 관리를 위해 스타일 사전을 활용하는 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을 사용하여 상호 연결된 디자인 토큰 검증 및 내보내기

계층 구조를 유지하면서 JSON 디자인 토큰을 처리하기 위한 Python 기반 접근 방식

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');
  });
});

상호 연결된 디자인 토큰에 대한 FAQ

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 파이프라인을 통합하면 확장성과 플랫폼 간 호환성이 향상됩니다. 웹에서 작업하든 기본 애플리케이션에서 작업하든 이러한 접근 방식을 통해 팀은 안정적이고 유연한 시스템을 유지할 수 있습니다. 자동화된 프로세스와 명확한 구성에 중점을 두어 강력한 디자인 토큰 관리를 위한 기반을 구축합니다.