#7 「Adobe XD for Visual Studio Code」
「Adobe XD extension for Visual Studio Code」は、10月に発表されたVS Code用の拡張機能です。Creative Cloudライブラリを経由してデザインシステムをAdobe XDとVS Code間で連携することで、VS Code上でデザインシステムを利用できます。
今回は、デザイナーと開発者のコミュニケーションをより確かなものにしてくれそうな「Adobe XD extension for Visual Studio Code」の機能や用途についてご紹介します！
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 古川
- こんにちは。
- 橋本
- こんにちは。
- 古川
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのPodcastです。本日の司会は古川が務めさせていただきます。ゲストは設計チームの橋本君です。よろしくお願いします。
- 橋本
- よろしくお願いします。
- 古川
- はい。今回のテーマはAdobe XD Extension for Visual Studio Codeっていうことなんですけど、私は普段VS Codeユーザーなのでこの字面だけで見ちゃうとちょっとそわそわしちゃうんですが、これってちなみにいったい何ですか。
- 橋本
- これはですね、その個人的には激アツでして、Adobeが10月に発表したAdobe XDをチームでより便利に使うためのVS Code用の拡張機能となってます。
- 古川
- なるほど。
- 橋本
- たとえば、大規模なプロジェクトだったり、チームでデザイン制作を行う場合、Adobe XDだとCreative Cloudを用いてデザインの配色やフォントサイズ、またコンポーネントとかのデザインルールをチームで連携できるんですよ。
- 古川
- あのデザインシステムってやつですよね。Adobe XDでいうと、ドキュメントアセットに登録するようなサイトの配色だったり、フォントサイズだったり、またアイコンなどの汎用コンポーネントみたいなやつですよね。
- 橋本
- そうですね。そのデザインシステムをクラウド上で連携することで、複数人でもトンマナが一貫したデザインが効率的に行えて、仮にデザインシステムに変更が入った場合でもデザインを一括更新することができます。 でもこのデザインシステムを開発者がコーディングする場合って、XD上でフォントサイズや配色を逐一確認して、それをエディター上に落とし込むじゃないですか。
- 古川
- うん。
- 橋本
- で、これって結構XDとエディターの往復をしたりして結構大変ですよね。
- 古川
- 若干煩わしさっていうのは毎回感じてますね。
- 橋本
- なんとですね、そこで登場するのが本日のテーマのAdobe XD Extension for Visual Studio Codeなんですが、この拡張機能を用いればVS Code上でXDの色やフォントサイズをクリックひとつで取得できて、またコンポーネントは拡張機能上でソースコードが登録されてさえいればコードスニペットから実装ができたりするんですよ。
- 古川
- え、それってめっちゃ便利すね笑
- 橋本
- そうなんですよ笑
なんかその一言で言うと、エディター上でデザインシステムを扱えるようにする拡張機能なんですけど、先ほど言った機能の他にも開発を加速させるような機能がたくさんあるので、今日はそれについてお話ししたいです！ - 古川
- ぜひ教えてください！
- 橋本
- この拡張機能は先ほどお話しした通りVS CodeとAdobe XDを連携できます。デザインシステムの管理の他にも、Webに限らずiOSやAndroidとか、あとFlutterなどの複数のプラットフォームに向けたスタイル出力ができます。また、この拡張機能の開発と並行してデザインシステムパッケージ、略してDSPっていう新たなオープンフォーマットのパッケージも開発されていて、これを使ってXDとVS Code間でデザインシステムの情報をGitHubだったりnpmとかで共有できるようになります。
- 古川
- GitHubなどを使って簡単にDSPを公開みたいなことができそうなので、今後DSPを配布するユーザーだったりだとか、企業は増えそうですね。
- 橋本
- そうですね。あと現在だと、BootstrapのDSPがMITライセンスで公開されていたりだとか、あとはマテリアルデザインのDSPも今後Googleから公開される予定ですね。
- 古川
- 具体的なDSPの構成を知るためにも、いくつか中身見てみるといいかもしれないですね。
- 橋本
- ですね～。
続いてこの拡張機能でできることについてお話しします。1つ目はデザイントークンの作成です。デザイントークンっていうのは、XDのドキュメントアセットに登録されている色やフォントサイズのコンポーネントに、任意でつけられる名前で、これを使うことでそれぞれの値を管理できます。そのデザイントークンなんですけど、今回の拡張機能によってVS Codeでも作成ができます。実際に作成できるトークンの種類としては、「Custom」「Size」「Color」「Alias」の4種類があって、それぞれに「Token ID」「Value」「Description」「Tags」という項目の入力欄があります。 - 古川
- 「Custom」「Size」「Color」っていうのはニュアンスから、設定できる内容みたいなのが想像できるんですけど、「Alias」はどんな指定ができるんですか？
- 橋本
- 「Alias」はですね、「Color」トークンとか「Size」トークンで同じ値でも、もとのトークンとは別名をつけたいときに用います。 たとえば、「Sky Blue」という「Color」トークンがあったとして、それをリンク色として定義したいとなったときに、エイリアスとして別途「リンク色」という名前のトークンを作成して、さきほどの「Sky Blue」トークンを紐付けます。で、今作った「リンク色」というトークンの方をリンクボタンのコンポーネントに指定してあげることで、今後「リンク色」は「Pink」という風にガイドラインが変わったとしても、「リンク色」のトークンの紐づけを「Sky Blue」から「Pink」に変更するだけでコンポーネント自体の変更とか更新をする必要がなくなるわけです。
- 古川
- なるほど！色の変更などが柔軟に対応できるので、聞いた感じめちゃくちゃ便利そうですね！
- 橋本
- そうですね。
XDで作成したデザイントークンを使うには、まずAdobe XDのメニューからCreative Cloudライブラリにデザインシステムを公開します。公開したデザインシステムには固有にアクセスリンクが付与されるので、そのリンクを「Adobe XD Extension for Visual Studio Code」で読み込むと、XD上で作成したデザイントークンをVS Code上で使えるようになります。 - 古川
- なるほど～。XD側もVS Code側もそこまで複雑な作業なく連携できるのが実用的な感じしますね。でもVS Code上でトークンを設定するよりは、XD側でトークンつけられるなら、読み込むだけでトークン使えるようになるってところを見ると、あらかじめXD上でつけてもらっていた方がありがたいかもしれないですね笑
- 橋本
- ですね笑
デザインもコーディングも自分1人だけでやるっていう人以外は基本的にデザイナーがXDで作ったデザイントークンを用いると思います。 - 古川
- なるほど。
- 橋本
- そして最後に、XDで作成したコンポーネントにはコードスニペットを登録できます。「Adobe XD Extension for Visual Studio Code」の画面の中にはComponentsっていう項目があって、そこでCode snippetの項目欄にJavaScriptだったりReactとかの各フレームワークごとに開発時に呼び出すコードを登録できます。また、ここでは使用しているデザイントークンも設定できて、デザイントークン側からもコンポーネントを参照しています。コードスニペットの登録が終わったら、あとはコーディング時にコード補完としてそのコンポーネントの見た目と説明文とコードスニペットが表示されるようになるので、視覚的にわかりやすく使うことができます。
- 古川
- 個人的にここがいちばんぐっと来てますね。たとえば、Bootstrapでページを作成するときは、Bootstrapのドキュメントをブラウザで参照して、ドキュメントの中からコンポーネント探して、コードをコピーして、エディター上のファイルにペーストする、みたいな作業が発生してたと思うんですけど、それがVS Code上で、しかもコードスニペットから呼び出しができるってことですよね。
- 橋本
- そういうことになりますね。
- 古川
- おぉー…。
今自分がコードスニペットからコンポーネントを実装するところ想像してみたんですけど、便利すぎてびっくりしますよね…！スニペットを入力して、タブキーを押したらコードが展開されるみたいなことですもんね。 - 橋本
- そういうことですね。
なので自分としても、コーディングがすごく捗りそうだなって思いました。もちろん、DSP上のコンポーネントにソースコードを登録したりするっていう作業はやっぱり発生するとは思うんですけど、後の運用のことを考えれば、必要なコストかなと思います。 - 古川
- なるほど。
- 橋本
- 以上が大まかな拡張機能の機能概要なんですけど、このほかにも細かなTipsが「Adobe XD Extension for Visual Studio Code」の公式ページで紹介されています。いくつかの例として挙げると、コンポーネントのDescriptionエリアにXDのデザインプレビュー用のリンクをiframeで埋め込んでホバーエフェクトを掲載したり、DSPの編集権限を設定したりなんてこともできるようです。詳細はぜひ、ページを見てみてください。
- 古川
- はい、あとで見てみようと思います！
さてここまで「Adobe XD Extension for Visual Studio Code」の機能の話をしてきたんですけど、ちなみにこれ橋本くんは、今後どういう風に活用されていきそうだなと思ってますか？ - 橋本
- 自分は、職種問わず制作チームのコミュニケーションにけっこう貢献してくれそうだなぁとは感じています。自分のイメージ的に、従来はデザイナーがデザインシステムを作成して、開発者がデザインシステムを参照してコーディングするという風に、デザインシステムとコードってちょっと切り離されている印象だったんです。また、複数開発者がいる場合に、デザインシステムに対して複数人別々の視点が入るので、デザインルールの解釈がたまにぶれてしまう可能性がありました。それが、この拡張機能によって、デザインシステムが今回のDSPというパッケージに落とし込まれることによって、デザインシステムとソースコードの結びつきがより強固になったのではないのかなという風に感じます。
- 古川
- 開発者間のコードレベルでのデザインルールの共有みたいなのもDSPを使えば簡単にできそうなので、開発者間同士の解釈の違いみたいなのが起きにくくなりますね。
- 橋本
- はい。あと自分は今後DSPの展開がとても楽しみで、これってオープンフォーマットなので、形式を踏襲すればほかのアプリだとかエディターでも使えるようになるかもですよね。 実際Adobe XDだと、DSP Readerっていうプラグインがあって、「Adobe XD Extension for Visual Studio Code」とは逆にXDにDSPを取り込むことができます。
- 古川
- なるほど。DSPがチーム間やツール間での、デザインシステムの共通言語みたいなものになったら、プロジェクトメンバーのコミュニケーションっていうのが加速しそうなので、個人的にはめっちゃ夢が今膨らんでますね。
はい、というわけで、今回のミツエーラックラジオでは、「Adobe XD Extension for Visual Studio Code」についてお話ししました！橋本くんは今後この拡張機能、案件で使えそうですか？ - 橋本
- 機能だけ見れば使えそうですね！ただ学習コストとか運用フローとかを見ると、今日から使える！とまではいかないかもしれません。
- 古川
- なるほど。まぁやっぱり、いまのところVS CodeでしかDSPが使えない点だったり、確立されてる運用フローとの兼ね合いを考えるとさくっと案件導入はちょっと難しいかもしれないですね。 ただ、開発者目線だとタブキー押してコンポーネント出てくるっていうのはめちゃくちゃテンションが上がるので、ちょっと案件でチャレンジしてみたいですよね。
- 橋本
- そうですね。うまく活用できればデザイナーとか開発者・実装者間のコミュニケーションの見直しが図れそうなので、 たとえば、Webサイトの構築フェーズだけとか、そういう限定的な環境に絞って試験的に使ってみたいなぁとは思いますね。
- 古川
- DSPがもっといろんな環境で使えるようになれば、案件導入みたいなことも現実味を帯びていくかもですね。
はい、最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますので、ぜひチェックしてみてください。 - 橋本
- また、このPodcastはApple Podcast、 Google Podcast、Spotifyで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。
- 古川
- それでは今日はこの辺で！ありがとうございましたー！
- 橋本
- ありがとうございましたー！