スタイルディクショナリによる相互接続されたデザイントークンの確保

スタイルディクショナリを使用してデザイントークンの階層構造を維持する方法

デザイントークン管理にスタイルディクショナリを活用した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');
  });
});

相互接続されたデザイントークンに関するよくある質問

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 アプリケーションで作業する場合でも、ネイティブ アプリケーションで作業する場合でも、これらのアプローチにより、チームは信頼性の高い柔軟なシステムを維持できるようになります。自動化されたプロセスと明確な構成に重点を置くことで、堅牢な設計トークン管理の基盤が構築されます。