あやね
デザインシステム管理（DSM）は、デザイン仕様の作成、コラボレーション、および反復（イテレーション）を中央集権化し、チーム全体で一貫したデザイン言語を維持するための仕組みです。エンタープライズ領域のワークフローでは、デザインツールと開発ツールの不一致が、デザイン再現性の低下やコミュニケーションコストの増大を招くケースが少なくありません。
Pixso の DSM は、この課題を「Single Source of Truth（真実の単一ソース）」によって解決します。エイリアスマッピングを通じてデザインの定義とエンジニアリングの実装を紐付け、ビジュアルとコードのギャップを埋めることで、より効率的で一貫性のあるプロダクト提供を可能にします。
デザインシステム管理（DSM）とは？
デザインシステム管理（DSM）は、デザイン仕様の中央集権的な公開、共同作業、および反復を行うためのプラットフォームです。コンポーネントのスタイルやデザイン・トークンなどのアセットを管理するだけでなく、最も重要な点として、デザイン言語がチーム全体で継続的に同期され、統一されていることを保証します。
実際の企業ワークフローにおいて、デザイナーとデベロッパーは異なるツール、言語、仕様を使用しています。デザイナーがデザインコンポーネントライブラリを使用して構築する一方で、デベロッパーはそれを実装するためにコードコンポーネントライブラリに依存します。両者の間に統一されたアライメント基準が欠如していると、デザインの再現性が低くなり、コミュニケーションコストが高まってしまいます。
Pixso の DSM は、「シングルソース管理」を通じてこの核心的な課題に対処します。デザインチームとフロントエンドチームが同一プラットフォーム上で一連の仕様を共同で構築・維持することで、双方に明確なデザインガイドラインを提供します。エイリアスマッピングにより、「デザインの定義」と「エンジニアリングの実装」をアトミック（原子）レベルで結合します。これにより、上述の「言語の壁」が解消され、ソースレベルでビジュアルとコードが一致し、コラボレーションの障壁が取り除かれます。
主要な構成要素
スタイル (Style)
デザイン・トークン (Design Token)
コンポーネント (Component)
デザインシステム管理へのアクセス方法
リソースが公開されているライブラリファイルを選択します。DSM を開くには、以下の 3 つのエントリポイントがあります。
1. エディタから: エディタ内のファイル名ドロップダウンメニューから「デザインシステムモード」をクリックします。
2. チームダッシュボードから: 「リソース」ページに移動し、「デザインシステムで開く」をクリックします。
3. ライブラリリストから: エディタ内のライブラリリストから「デザインシステムを開く」をクリックします。
リソース・エイリアスの設定
デザインシステム内では、ユーザー（デザイナーまたはデベロッパー）がコンポーネントとコードの対応関係を明示的に宣言します。エイリアスシステムを通じて、デザインチームと開発チームはセマンティック（意味論的）なマッピング関係を共同で構築・維持できます。
エイリアスは、固有の「ID番号」のようなものだと考えることができます。システムはこの「ID番号」を使用して、特定の基礎となるリソース（色数値やコンポーネントなど）を迅速かつ正確に特定します。
エイリアスの設定方法：
1.DSM 内で対応するリソースを見つけます。
2. 手動でエイリアス情報を入力します。
3. 更新内容を公開（パブリッシュ）します。
制限事項: 全角文字や特殊記号はサポートされていません。スタイル、デザイン・トークン、コンポーネントのエイリアスは重複させることはできません。コンポーネントセット内では、異なるプロパティや値のエイリアスは一意である必要があります。（衝突を避けるため、通常は階層構造を使用して一意性を確保するなどの命名規則をチームで確立します）。
コンポーネントコードの活用方法
デザインシステムでコンポーネントにエイリアスが割り当てられると、対応するコードは元のプロパティ名の代わりに、自動的にセマンティックなエイリアスを使用するようになります。デベロッパーはコードパネルからスニペットを直接コピーし、既存の開発プロジェクトに貼り付けることができるため、開発効率が大幅に向上します。
この機能は、さまざまなフロントエンドフレームワークのコード形式をサポートしています。フレームワークを切り替えた後、「再生成」をクリックして、対応するコード構造をリフレッシュおよびプレビューできます。
スタイルとデザイン・トークンの書き出し方法
一括エクスポート機能を使用すると、デザインシステムのスタイルとデザイン・トークンをワンクリックでフロントエンドコードに変換できます。デザインシステムでエイリアスが設定されている場合、それらはコード内に同期して反映されます。
機能の詳細：
エクスポート形式: CSS および SCSS をサポートし、異なる技術スタックを持つプロジェクトへの統合を容易にします。
エクスポート範囲: 必要に応じて、特定のデザインリソース（カラー、テキスト、エフェクトなど）を選択してエクスポートできます。
ワークフロー：
プレビューの生成: 範囲を選択して「生成」をクリックし、対応するコードをプレビューします。
ダウンロードと使用: コードパッケージを確認してダウンロードし、ローカルのコードエディタで直接使用します。
この機能により、デザイン・トークンが実用的なコードへと迅速に変換され、デザインと開発の間のハンドオフ（受け渡し）効率が効果的に改善されます。
