Adobe XD for Visual Studio Code試用レポート

2020年11月14日（土）にオンライン開催されたWCAN 2020 Frontend SpecialのLTでお話した内容のまとめ記事です。LT中では話せなかったこと、後から気づいたことも追記してあります。
とても5分では読めない内容なので、5分のLT中に「この拡張機能なんかよさそう」と感じられたヒトは、時間を節約できてラッキーだったかと思いますwww

Adobe XD for Visual Studio Codeは10月アップデートの新機能、というか、VScodeの拡張機能

「Adobe XD for Visual Studio Code」は、Adobe XD 2020年10月アップデートで紹介されている新機能です。AdobeXDそのものの機能ではなく、エンジニアに人気のテキストエディタVisual Studio Codeの拡張機能です。

2020年10月に開催されたAdobe MAX 2020を視聴していて、エンジニア的に唯一「は！」と気持ちを惹きつけられたのが、この拡張機能でした。

気になったので、早速試してみた…訳ではなく、WCANのLTの再々募集がかかった際、そーいえば気になってた機能があったな、と思い出し、ジブンの尻を叩いて勉強させるつもりでLTの申込みをし、それから試用してみたという次第です(^_^;)

Adobe XD for Visual Studio Codeで、できること

VScodeにこの拡張機能を追加すると、だいたい次のようなことができます

  • 1. 簡易スタイルガイド（DSP）をVScode上に生成する
  • 2. XDドキュメントのアセットを、変数として書き出す
  • 3. コンポーネントのソースコードを、トリガーで呼び出す

1. 簡易スタイルガイド（DSP）をVScode上に生成する

XDドキュメントにアセットとして登録してあるカラー・文字スタイル・コンポーネントを、GUIで操作できるスタイルガイド（DSP=Design System Package）として、生成することができます。

アセットをCCライブラリに登録するという一手間が必要ですが、タスクランナー等咬ませることなく、一瞬で生成できます。

2. XDドキュメントのアセットを、変数として書き出す

また、アセットに登録してあるカラーや文字スタイルを、変数として書き出したファイルを生成することができます。ファイルは以下の言語ごとに書き出され、必要なもののみ選択して書き出すこともできます。

  • CSS
  • Flutter(Dart)
  • Andoroid(Java)
  • JavaScript
  • iOS(Objective-C)
  • SCSS
  • iOS(Swift)

文字スタイルは、フォントファミリ、フォントウェイト、フォントサイズが、それぞれ分かれた状態で書き出されます。

文字スタイルの変数の書き出され方

SCSSの変数名は、デフォルトではアセット名を小文字ハイフン繋ぎにしたもの、すなわちケバブケースになりますが、スネークケースやキャメルケースなどにも変更できます。これは拡張機能の設定画面では変更できず、設定ファイルを直接書き換えることになります。

下記ディレクトリにある既存のconfig.jsファイルをパッケージ名\dist\styledictionary\config.js
コピーして別名で保存し（config.jsを書き換えても、書き換え前の状態に戻ってしまいます）パッケージ名\dist\styledictionary\config2.js
“Override default transform groups with custom name transform”というコメント以下の箇所の書き換えを行います。

書き出す言語ごとに設定が異なるので、それぞれの言語に於いて書き換えることになります。

config2.jsファイルを作って設定を変更する

拡張機能の設定画面で”DSP settings”というボタンをクリックし、”BUILD PARAMETERS”という入力欄のファイル名を書き換え、設定を保存します。

“DSP settings”の下の”Start editing”をクリック、表示が”Finish editing”に変わってから再度クリックすると、ファイルの再書き出しが行われ、設定の変更が反映されます。

CSSとSCSSのフォントサイズの単位はデフォルトではremになっていますが、これも同じ設定ファイルを書き換えることで変更できます。操作の詳細は、公式動画をご参照ください

3. コンポーネントのソースコードを、トリガーで呼び出す

さて、3つ目のこの機能が一番便利かと思います。

生成されたDSPの各コンポーネントには、コードスニペットの入力欄があり、ソースコードとトリガーを登録できます。

コードスニペットとトリガーを登録する

コードスニペットは言語ごとに登録できるようになっています。

コードスニペットは言語ごとに設定できる

ワークスペース内のファイルでトリガーを何文字か打ち込むと、入力候補が現れます。しかもスニペットの形状まで表示されるので、大変便利です。

初期設定ではトリガーに”xd_”というプレフィクスが付くようになっていますが、拡張機能の設定画面で、他の文字列に変えることもできます。

トリガーをタイプすると、入力候補が現れる

XDドキュメントとDSPの同期

アセットの内容をドキュメント側で変更した場合、DSPにはどのような手順で反映できるのでしょうか。

まず、アセットに変更が加わると、CCライブラリにデザインシステムとして登録済みの場合は、CCライブラリの更新を促すアラートが出ます。CCライブラリを更新し、さらにVScodeの拡張機能の設定画面でデザインシステムをインポートし直すと、DSPに反映されます。

“Start editing”と”Finish editing”をクリックしてファルを書き出しし直すと、変数のファイルにも反映されます。デザイナーの方との連携が取れていればとても便利そうですね。ご自身でデザインとコーディングをされる方にも使い出がありそうです。

ご紹介した基本の機能以外にも、エイリアスを登録したり、タグを登録して検索し易くしたり、細かくカスタマイズができるようです。作り込むほどに使い易いスタイルガイドが作れそうです。

Adobe XD for Visual Studio Codeの導入方法

まず、VScode側に拡張機能をインストールします。VScodeのMarketplaceのページの「インストール」ボタンをクリックするか、VScodeの拡張機能サイドバーを開いて”Adobe XD”で検索してインストールすることもできます。

拡張機能をインストールすると、エディタの右下に”XD”というクリッカブルなテキストが現れます。コレをクリックすると拡張機能の管理画面が現れます。

または、Ctrl+Alt+X（Macユーザーの方は適宜読み替えてください）というショートカットで開くこともできますし、Ctrl+Shift+Pでコマンドパネルを出し、xdとタイプすると候補として出てくる”Toggle Adobe XD panel”を選択することで管理画面を開くこともできます。

VScodeで”Adobe XD”を開く

DSPを作成するには、以下の方法があります

  • 拡張機能の設定画面でデザイントークンを一つ一つ入力していく
  • XDドキュメントのアセットをCCライブラリに登録し、拡張機能側で読み込む
  • 公開されているCCライブラリを拡張機能側で読み込む
  • 公開されているDSPを拡張機能側で読み込む

2の方法以外ではAdobeのアカウントがなくても利用できるのではないかと思います。2の方法でも、デザインを作成しライブラリを公開するの人のみがアカウントを持っていれば良いことになり、すなわちエンジニアはデザイナーが公開したライブラリを3の方法で利用することになります。

次の動画は、ワークスペースを作り、DSPの空のファイルを作るまで、すなわち1の方法の、デザイントークン（アセット名とその内容を関連付けたもの）を登録する前までの手順になります。

Bootstrap用DSP

Bootstrap DSPを読み込んでコーディングに利用する

とても便利そうなDSPですが、実は、個人的には使う局面はあまりなさそうだな、と感じています。というのも、筆者自身がWebデザインを行うわけでもなく、また社内ルールが統一された唯一の職場で働いているわけでもないので、受け取るデザインデータは案件によってバラバラです。AdobeXDのデザインデータを受け取ったとしても、アセットがまったく登録されていない場合も多く、自分で主要なカラーを抽出したり、コンポーネントらしいものを洗い出したりしています。すなわちPhotoshopやIllustratorでデザインされたデータと似たようなものであるわけです。

また、かなりXDを使い込んでいるデザイナーの方でも、アセット名をきっちりつけるところまで手が回らない、とおっしゃっていたのを聞いたこともあります。

アセットの登録を逐一行うというルールのある特定の現場のエンジニアでないと、DSPのメリットは享受できないのかな、という印象です。

しかし。

アセットを作り込んだデザインデータを受け取れない方にも、朗報です。ただし、Bootstrapをよく使う方限定ですが（筆者はほとんど使いません。発注元に指定されると渋々使うかんじ）。

Bootstrap 5 DSP for the Adobe XD Extension for VS CodeというDSPが公開されていて、コンポーネントにはReactとHTMLのコードスニペットが登録済みなのです。Bootstrapをよく使う方にはかなり利用し甲斐がありそうです。

前章で挙げた「公開されているDSPを拡張機能側で読み込む」方法を使います。

Bootstrap 5 DSP for the Adobe XD Extension for VS Codeのページ内にある”Click here to get your free download of the Bootstrap DSP”というテキストをクリックし、Bootstrap DSPをダウンロードします。

続いて、VScodeでAdobeXDパネルを表示します。”Load package”というボタンをクリックすると、次の画面で”Select folder”というボタンが表示されます。ここで、ダウンロードしたDSPのディレクトリを選びます。ダウンロードしたファイルは”bootstrap-dsp-master”というディレクトリに収まっていますが、その直下の”bootstrap-dsp”というディレクトリを選べばいいようです。

DSPを読み込む

するとパッケージが読み込まれ…

Bootstrap 5 DSPを読み込んだところ

ソースコードを、らくらく入力できるようになります＼(^O^)／

入力候補が現れ、ソースコードを一瞬で入力できる

Bootstrapベースのデザインデータを作る

このDSPの元になっているデザインシステムがCCライブラリ上に公開されています。ということは、ジブンで制作するXDドキュメントに読み込んで、Bootstrapベースのデザインデータを作ることも可能になりますね。

”DSP settings”をクリックし、一番下の”CC LIBRARY LINK”入力欄にBootstrapデザインシステムのURLが記載されています。このページにアクセスし、「ライブラリをフォロー」というボタンをクリックすると自分のアカウントのライブラリに「フォロー中のアイテム」として保存されます。

この状態でXDドキュメントを開き、ライブラリパネルを開くと、先程フォローしたライブラリが表示されているので、コレをクリックすると、アセットとして表示されます。これでBootstrapのコンポーネントを利用したWebデザインを制作することができるようになりますね。

フォロー中のライブラリがパネルに表示される
Bootstrapのデザインシステムが取り込まれた