あやね
デザインシステム管理（DSM）は、コンポーネント、スタイル、デザイントークンと利用ルールをまとめて管理する仕組みです。デザイナーと開発者が共通の仕様を参照できるようにし、画面ごとのばらつきや確認の手間を減らします。
PixsoのDSMでは、デザインリソースにエイリアスを設定し、コードで使う名前との対応を管理できます。共通の仕様を確認しながら、デザインと実装のすり合わせを進めましょう。
デザインシステム管理（DSM）とは？
DSMでは、共通のコンポーネントやスタイルを公開し、チームで利用・更新します。リソースをまとめるだけでなく、名前の付け方や変更の共有方法も決めておくと、同じ仕様を参照しやすくなります。
デザイナーはデザインツールの部品を使い、開発者はコードの部品を使って画面を作ります。名前や状態の定義が異なると確認が増えるため、両者の対応を明確にしておくことが大切です。
エイリアスは、デザイン側のリソースと開発側の名前を対応付けるために使います。たとえばボタンや色の役割に沿った名前をチームで決め、同じ定義を参照しながら更新します。実装への反映は、開発側の構成や運用に合わせて確認します。
主要な構成要素
スタイル (Style)
デザイントークン (Design Token)
コンポーネント (Component)
デザインシステム管理へのアクセス方法
リソースを公開しているライブラリファイルからDSMを開きます。主な入口は次の三つです。
1. エディタから: エディタ内のファイル名ドロップダウンメニューから「デザインシステムモード」をクリックします。
2. チームダッシュボードから: 「リソース」ページに移動し、「デザインシステムで開く」をクリックします。
3. ライブラリリストから: エディタ内のライブラリリストから「デザインシステムを開く」をクリックします。
リソース・エイリアスの設定
デザイナーと開発者で名前の付け方を決め、コンポーネントやスタイルにエイリアスを設定します。画面上の名前とコード上の名前の対応を、チームで確認できるようにします。
エイリアスは、リソースを識別するための名前です。単に色の見た目を表す名前よりも、用途や役割が分かる名前にすると、変更時にも使い方を判断しやすくなります。
エイリアスの設定方法：
1.DSM 内で対応するリソースを見つけます。
2. 手動でエイリアス情報を入力します。
3. 更新内容を公開（パブリッシュ）します。
エイリアスには全角文字や特殊記号を使用できません。スタイル、デザイントークン、コンポーネントの名前が重複しないように管理します。コンポーネントセット内のプロパティや値にも、区別できる名前を付けてください。
コンポーネントコードの活用方法
エイリアスを設定すると、対応するコード情報にもその名前を利用できます。開発者はコードパネルの情報を参照し、プロジェクトの命名規則や実装に合う形で取り込めます。
必要なコード形式を選び、再生成して内容を確認します。利用するフレームワークや部品の構成に合わせて、実装側で必要な調整を行います。
スタイルとデザイントークンの書き出し方法
スタイルとデザイントークンは、対象を選んでコードとして書き出せます。設定したエイリアスがどの名前で出力されるかを確認してから、開発プロジェクトに取り込みます。
機能の詳細：
書き出し形式：CSSまたはSCSSを選び、開発側の構成に合わせて利用します。
書き出し範囲：色、文字、効果など、必要なリソースを選択します。
ワークフロー：
プレビュー：範囲を選択して生成し、値と名前を確認します。
ダウンロード：コードを取得し、プロジェクトの構成に合わせて取り込みます。
更新時は、変更した値と影響する画面をチームで共有しましょう。書き出したコードと実際の画面を確認すると、デザインと実装の違いを見つけやすくなります。
色や余白などの値をチームで揃える方法は、デザイントークンの活用方法でも詳しく紹介しています。
