Adobe XD

Bootstrap 5 DSPを使ってみた【Adobe XD extension for Visual Studio Code】

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を作成してみたいと思います。