2020/10/20に登場した「VS Code」の拡張機能「Adobe XD extension」でデザインシステムパッケージ（DSP）というものが使えるようになっているとのこと。
DSPってなんぞやと思いながら、XDデザイン→コーディングの流れが円滑になるのでは？ということで、実際に試してみました。
デザインシステムパッケージ（DSP）ってなに？
以下が2020/10/20に発表されたXDアップデートの記事。
Adobe XD extension for Visual Studio Codeの開発と平行して、アドビは顧客やパートナーとの緊密な協力のもと、「Design System Package（DSP）」という新しいオープンなパッケージ形式を定義しました。これは異なるツール間でデザインシステムの情報を共有するためのものです。開発者はVisual Studio Code用の拡張機能を使い、Creative Cloudライブラリに登録済みのデザインシステムのアセットを格納したDSPを作成できます。
Adobe XD 2020年10月アップデートリリース！3D変形、CCライブラリ、Visual Studio Code連携など
XDで作成したアセットとかコンポーネントをDSP形式で書き出して、VS Codeの拡張機能「Adobe XD extension」でエディタに読み込む(作成する)という感じなのかな。
これだけでは、何が便利になるのかよく分からなかったので、詳しく説明されていたics.mediaさんの記事を読んでみると分かりやすい。
DSPを利用する事で便利になりそうな点
- カラー、文字スタイルアセットのCSS変数出力
- コンポーネントのコードスニペットをデザインプレビュー付きで使える
カラー、文字スタイルアセットのCSS変数出力
これは、XDの開発共有機能でもCSS変数出力ができるのでそこまで体感は変わらない？
XDとVS Code間を行き来する必要がなく、VS CodeにDSPを作成すれば、CSS変数をコピーできる点が便利になっていると認識。
コードスニペットにデザインプレビューが付く
これは、すごく便利そう！！
モジュール作成していて、コードを使い回したい時って沢山あるけど、久しく使っていない場合、どのコードがどんなデザインだったか忘れがち。。
デザインプレビューがあると、分かりやすくなるのでは？
調べてみたところ、すでにBootstrap 5 のDSPが存在している！ということなので、今回はBootstrap 5のDSPを使って、デザインプレビュー付きのコードスニペット機能を体験してみました。
DSPを利用するための準備
DSPを利用するための準備をしていきます。
VS Codeエディタに拡張機能「Adobe XD」をインストールします。
VS Codeの拡張機能→Adobe XDと検索すれば一番上に出てきました。
こちらをインストールして有効化しておきます。
Bootstrap 5 DSPをダウンロード
次にBootstrap 5 DSPをダウンロードします。 Bootstrap 5 DSPのコードスニペットはHTMLとReactをサポートしています。 自分で作成する手間がなくて良いですね。ありがたや。
ライセンスはMITライセンスになっています。
以下、説明記事とDSPがダウンロードできる、Githubのリンクです。
直接Githubからダウンロードする場合はこちらから
Bootstrap 5 UIキットもあると分かりやすい
Bootstrap 5 DSPは「XD-Bootstrap-v.5-UI-Kit AdobeCC」をベースに構築されています。 XDでデザイン作成する際は合わせてダウンロードしておきましょう。
Bootstrap 5 UIキットは以下からダウンロードできます。
Bootstrap 5 DSPをVS Codeに読み込む
Bootstrap 5 DSPファイルを先ほどインストールしたVS Codeの拡張機能「Adobe XD」を使用して読み込みます。
bootstrap-dsp-master.zipというファイルがダウンロード出来ていると思うので解凍しておきます。
解凍した中身は、以下のファイル構成になってました。
VS CodeでAdobe XDプラグインを開く
次にVS CodeでAdobe XDプラグインを開きます。プラグインをインストールして有効化すると、右下にXDというボタンが表示されていました。こちらをクリックします。
デザインシステムパッケージ(DSP)を読み込む
Welcome to Adobe XDという表示がでたら、Load packageボタンをクリックします。
Load packageという表示が出たら、Select folderをクリック
ここで、先ほど解凍しておいた、bootstrap-dsp-masterの中にある、bootstrap-dspフォルダを選択します。
dspフォルダを選択できたら、以下のような画面になります。
The DSP package you selected contains multiple code snippets. Please select the ones you need available for your project.
[Google翻訳]
選択したDSPパッケージには、複数のコードスニペットが含まれています。 プロジェクトで利用できる必要なものを選択してください。
と出てくるので、今回はHTMLを選択して次に進みます。
The DSP package loaded contains folders with design tokens compiled to platform-specific code. You can copy these to folder(s) in your working project.
[Google翻訳]
ロードされたDSPパッケージには、プラットフォーム固有のコードにコンパイルされたデザイントークンを含むフォルダーが含まれています。 これらを作業プロジェクトのフォルダーにコピーできます。
と出てきます。デザイントークンなので、XD上で作成されたアセットの変数の事みたいです。 今回はHTMLベースで試すので、CSSファイルだけコピーしておきます。
Copy toからプロジェクトフォルダを選択します。
variables.cssがコピーされました。ファイルの中にはカラーやフォントの変数がずらりと並んでいます。これがカラー、文字スタイルアセットのCSS変数出力というやつですね。
Adobe XDプラグインに戻るとDSPの読み込みが完了しています。 ドキュメント情報、デザイントークン、そしてお目当てのデザインプレビュー付きのコンポーネントが一覧になって並んでいます！
VS Codeでデザインをプレビューできるコードスニペットが利用できるようになりました。
Bootstrap 5 DSPのコードスニペットを利用してみる
DSPの読み込みが出来たので、HTMLファイルで実際にコードスニペットを利用してみます。
Bootstrap 5 のCSSを読み込んでおく
Bootstrap 5を利用するための、CSSをCDNで読み込んでおきます。 以下からリンクを確認できます。
コードスニペットの使い方
Bootstrap 5のCSSを読み込んだHTMLを開いたら、DSPのコードスニペットを使ってみます。
xdと入力すると、コードスニペットのコンポーネント一覧がデザインプレビュー付きで表示されました！便利！
一覧をよくみると、HTML用のコードスニペットとReact用のコードスニペットの両方が表示されています。今回は、HTMLのスニペットを使用していきます。使用する時は間違わないように気をつけたいですね。
コンポーネントを作ってみる
コードスニペットの使い方が分かったので、いくつかコンポーネントを出してみます。 画像表示系のコンポーネントは画像が読み込まれないので、事前にダミー画像は用意しておきました。
以下のようにコードスニペットを利用して、コンポーネントを呼び出すことができます。
画像入りカードのコンポーネントとボタンのコンポーネントを出力してみました。
他のDSPを使用したい場合
Bootstrap 5 DSPの他にも、いくつかDSPが用意されています。 以下から見れるので、興味がある方は是非みてみてください。
最後に
今回は、Bootstrap 5 DSPを「VS Code」の拡張機能「Adobe XD extension」で利用してみました。 Bootstrap 5 DSPは、コードスニペットも登録済みで、CSSも設定されているので、コーディングをする時にCSS変数の出力や、デザイン付きのコードスニペットが利用できるので、便利です！
実際にプロジェクト用にDSPを作成するとなると、コードスニペットの登録や、CSSの実装、デザインを更新した時の対応など、事前の準備と連携が必要になりそうなので、またの機会にDSPを作成してみたいと思います。
