デザインシステム管理（DSM）：デザインと開発を同期させ、プロダクト開発を加速させる

デザインシステム管理（DSM）は、コンポーネント、スタイル、デザイントークンと利用ルールをまとめて管理する仕組みです。デザイナーと開発者が共通の仕様を参照できるようにし、画面ごとのばらつきや確認の手間を減らします。

PixsoのDSMでは、デザインリソースにエイリアスを設定し、コードで使う名前との対応を管理できます。まずPixsoのデザインシステム機能で共有する部品とスタイルを整理し、どの名前と用途をチームの基準にするかを決めましょう。エイリアスを付けるだけで、既存のアプリケーションのコードが置き換わるわけではありません。

デザインシステム管理（DSM）とは？

DSMでは、共通のコンポーネントやスタイルを公開し、チームで利用・更新します。リソースをまとめるだけでなく、名前の付け方や変更の共有方法も決めておくと、同じ仕様を参照しやすくなります。

デザイナーはデザインツールの部品を使い、開発者はコードの部品を使って画面を作ります。名前や状態の定義が異なると確認が増えるため、両者の対応を明確にしておくことが大切です。

エイリアスは、デザイン側のリソースと開発側の名前を対応付けるために使います。たとえばボタンや色の役割に沿った名前をチームで決め、同じ定義を参照しながら更新します。実装への反映は、開発側の構成や運用に合わせて確認します。

主要な構成要素

同じ青でも、リンクと予約確定ボタンでは役割が違う場合があります。いま同じ値だからという理由だけで一つの名前に統合すると、片方だけを変更したいときに困ります。見た目だけでなく、変更が一緒に起こる単位で整理してください。

• スタイル (Style)

• デザイントークン (Design Token)

• コンポーネント (Component)

デザインシステム管理へのアクセス方法

リソースを公開しているライブラリファイルからDSMを開きます。主な入口は次の三つです。

1. エディタから: エディタ内のファイル名ドロップダウンメニューから「デザインシステムモード」をクリックします。

2. チームダッシュボードから: 「リソース」ページに移動し、「デザインシステムで開く」をクリックします。

3. ライブラリリストから: エディタ内のライブラリリストから「デザインシステムを開く」をクリックします。

リソース・エイリアスの設定

デザイナーと開発者で名前の付け方を決め、コンポーネントやスタイルにエイリアスを設定します。画面上の名前とコード上の名前の対応を、チームで確認できるようにします。

エイリアスは、リソースを識別するための名前です。単に色の見た目を表す名前よりも、用途や役割が分かる名前にすると、変更時にも使い方を判断しやすくなります。

主操作ボタンの色を、デザインと実装で対応付ける

例えば予約画面の確定ボタンに使う色なら、「青い色」ではなく「主操作の背景」として意味を決めます。デザイン側の名前、DSMのエイリアス、コード側の参照名は、開発者と相談して対応させます。以下はチームで決める命名の例で、Pixsoが自動的に用意する名称ではありません。

将来色が変わっても役割が同じなら、役割を表す名前は維持できます。一方、確認ボタンと危険な削除操作の意味を分ける変更なら、名前と利用箇所を見直す必要があります。値の変更と意味の変更を混同しないことが大切です。

エイリアスの設定方法：

1.DSM 内で対応するリソースを見つけます。

2. 手動でエイリアス情報を入力します。

3. 更新内容を公開（パブリッシュ）します。

エイリアスには全角文字や特殊記号を使用できません。スタイル、デザイントークン、コンポーネントの名前が重複しないように管理します。コンポーネントセット内のプロパティや値にも、区別できる名前を付けてください。

コンポーネントコードの活用方法

エイリアスを設定すると、対応するコード情報にもその名前を利用できます。開発者はコードパネルの情報を参照し、プロジェクトの命名規則や実装に合う形で取り込めます。

必要なコード形式を選び、再生成して内容を確認します。利用するフレームワークや部品の構成に合わせて、実装側で必要な調整を行います。

開発者に渡すときは、エイリアスの一覧だけでなく、対応するコンポーネント、通常時とエラー時の画面、変更理由を一緒に共有します。名前が一致していても、デザイン側の「利用不可」と実装側の「読み込み中」が同じ状態とは限りません。状態の意味と振る舞いもそろえます。

スタイルとデザイントークンの書き出し方法

スタイルとデザイントークンは、対象を選んでコードとして書き出せます。設定したエイリアスがどの名前で出力されるかを確認してから、開発プロジェクトに取り込みます。

機能の詳細：

• 書き出し形式：CSSまたはSCSSを選び、開発側の構成に合わせて利用します。

• 書き出し範囲：色、文字、効果など、必要なリソースを選択します。

ワークフロー：

1. プレビュー：範囲を選択して生成し、値と名前を確認します。

1. ダウンロード：コードを取得し、プロジェクトの構成に合わせて取り込みます。

変更を公開した後は、利用先まで確かめる

変更を公開した人、コードへ取り込む人、利用画面を確かめる人を決めます。例えば予約ボタンの色を変えたら、デザインの確認画面と、実装された予約画面の両方を見ます。古い値が直接指定されている画面は、共有リソースだけを変えても残る可能性があります。

変更の記録には「どのリソースを」「なぜ」「どこへ適用するか」を残します。旧リソースを廃止する場合は、置き換え先と未対応の利用箇所を確認してから整理します。名前を消すことと、利用先の移行が完了することは同じではありません。

書き出し結果に想定したエイリアスが見当たらない場合は、対象リソースに名前が設定されているか、公開した変更を参照しているか、選択した書き出し範囲に含まれるかを順に確認します。デザインとコードの両側に同じ名前があるかまで確かめると、引き渡し時の取り違えを減らせます。

色や余白などの値をチームで揃える方法は、デザイントークンの活用方法でも詳しく紹介しています。