こんにちは！アイスタイルでフロントエンドエンジニアをやってますsakaguchiiです。
2020年10月Adobe XDの新機能がリリースされましたね?
その中にVisual Studio Code連携があるとのことだったので早速試してみました。
Adobe XDとVisual Studio Codeの連携
連携機能については下記のページの動画で確認することができます。
https://letsxd.com/vscode
一通り触ってみた感覚としては、VS codeでは下記のことができるようです。
◇ デザイントークンの作成
◇ UIキットから設定をインポート
◇ インポートした設定をscssファイルで書き出し
◇ インポートした設定に対してスニペットの登録
今回はUIキットから設定をインポートし、ファイルを書き出すところまでやってみたいと思います ?
◆ 導入
① VS codeの拡張機能にXDを追加する
インストールしたあとはコマンドから「>xd: toggle adobe xd panel」を選びパネルを開きます
XDのパネルを開くとこのようになり、ここからDSP（Design System Packages)を作成することができます。
初めて作成するので今回は「Create package」を選択します
② DSPの作成
「DESIGN SYSTEM PACKAGE NAME」：パッケージの名前と、パッケージをどこに保存するかを指定します。
なお、保存した場所配下にscssファイルが生成されます
以降は初期設定まま＆SKIPできるので進めます ?
設定が終わるとこのような画面になります。
ここからデザイントークンを任意で作成することができるので作ってみます ✒️
③ デザイントークンの作成
▼ XDのデザイントークンとは
https://helpx.adobe.com/jp/xd/user-guide.html/jp/xd/help/create-design-tokens-in-XD.ug.html
Adobe XD にデザイントークンを追加して、アセットパネルに表示されるカラーや文字スタイルにカスタマイズした共通の名前を付けることができます。
たとえば「プライマリーカラーは#618871」というデザインガイドラインがあるとき、XDではアセットパネルからルールにそった定義（primary:#618871)を作成することができます。
同じことがVS codeでもできるのでやってみましょう。
tokensの追加
「Start editing」を押すと編集できる状態になり、この状態で「Design tokens」＞「New token」のボタンからデザイントークンを追加します。
「Size」「Color」「Alias」の種類から追加する内容を選ぶことができます。
size
大きさの定義を作成します。
color
色の定義を作成します。
ちなみに弊社には「@cosmeグリーン」という色が存在するのですが、定義名に「@」は使えませんでした・・・残念・・・?
https://logo.istyle.co.jp/
https://note.com/istyle_design/n/n95a336b26ca0
alias
たとえば「リンク色」など機能に対して設定を行いたい場合、下記のようにエイリアスを作成することができます。このエイリアスは前段で定義したcolorやsizeを参照します。
ここまで記載しましたが、VS codeでデザイントークンを作ることはあったとしてもイレギュラーでしょう?
大抵はXDで作成されることになると思いますので、次はXDで作ったデザイントークンをVS codeにインポートしてみたいと思います。
◆ XDとの連携
① UIキットを用意する
デザイントークンが登録されたXDを用意します。
今回はお試しなので下記からダウンロードできる「Sign Up Screen UIキット」を使います
https://www.adobe.com/jp/products/xd/resources.html#panel-3
② ライブラリとして公開する
XDのライブラリタブを開いた状態で右上のアイコンを押すと下記のように公開したいファイルを選択するウィンドウが表示されます。
「公開」ボタンクリックでXDのクラウドドキュメントに保存することができます。
③ ブラウザからライブラリを表示
ブラウザに移動します。
Creative cloudの「作品」から先ほど公開したアイテムが確認できます。
そして先ほど公開したXDの詳細を開くと下記のような画面が表示されますので、このページのリンクを取得します。
④ CC LIBRARY LINKに入力しインポートする
VS Codeに戻ります。
createから作成しても大丈夫ですし、編集中のDSPの「DSP settings」から編集することも可能です?
どちらもCC LIBRARY LINKの入力をする場所があるため、ここに先ほど取得したリンクを貼り、IMPORTします。
インポートが完了すると、XDでのデザイントークンの設定が反映されます。
● 色
● タイポグラフィ
● コンポーネント
などがインポートされていますね ?
これでXDのデザイントークンをVS codeに取り込むことができました?
このままではコードとして扱うことはできないので最後にscssとして書き出してみましょう ✍️
◆ インポートした設定をscssファイルで書き出し
① Start editingを押す→ Finish editingを押す
・・・としたとき、書き出し完了のアラートが表示されれば完了です。
dist配下にデザイントークンの設定が変数化されてscssとして書き出されています ?
※ なおこの記事ではscssに限定していましたが、DSPの設定＞Languagesで設定したファイルが書き出されるので、CSSとSCSSにチェックを入れている場合は両方書き出されます
おわりに
弊社はWEBページをマークアップするときはだいたいXDファイルでデザインデータをもらうので、XDで設定されているデザイントークンをそのままVScodeにインポートできるこの機能はとてもありがたいですね?
まだまだまだ勉強中なので、こんな使い方もあるよ?というのを引き続き研究していきたいなと思います！
スニペットの登録編はまた次回にしたいと思います?
ここまでお付き合いいただきありがとうございました！
