Adobe XD 2020年10月の新機能！ついにVisual Studio Codeと連携可能に

Post on:2020年10月22日

sponsors

昨日から開催されているAdobe MAX（10/23まで）と同時に、Adobe XDの最新アップデートがリリースされました！

今までになかったまったく新しい新機能をはじめ、さまざまな機能の強化、共同編集機能の正式版、中でもCCライブラリ強化とVS Code連携は、ワークフローがさらに改善されると思います。

まずは、Visual Studio Code連携。
VS Codeのプラグインとして無料で利用でき、デベロッパーはデザイントークンを数秒で作成し、Web、iOS、Android、Flutterなど複数のプラットフォームに向けてアプリをコンパイルすることができます。コーディング中は、関連するドキュメントやコードスニペットに素早くアクセスすることができます。

プラグインのインストールは、下記ページから。
※2020年10月20日リリースのAdobe XD34でご利用ください。

Adobe XD -Visual Studio Markerplace

「Install」ボタンをクリックすると、「Visual Studio Codeで開きますか？」と表示されるので、「許可」をクリックします。

「Install」ボタンをクリック

Visual Studio Codeで開いたら、「インストール」ボタンをクリックするだけです。

「インストール」ボタンをクリック

異なる実装での同じコンポーネントのコードスニペット。

コードスニペット

異なる実装での同じコンポーネントのコード補完。

コード補完

Adobe XDの新機能は、まだまだあります！

Adobe XDの新機能

3D変形

3Dスペースでオブジェクトを回転、遠近法で表示、奥行きの表現もリアルな外観も瞬く間にできます。

command+T(ctrl+T)で3D変形がオンになり、テキスト・画像をはじめグループにも3Dを適用できます。
共同編集

共同編集機能がベータから公開版になりました。

チーム全員でリアルタイムでの共同作業が可能です。
高さを自動調整

幅を固定したまま、テキストレイヤーのコンテンツに応じて高さを自動的に調整できます。

「自動高さ調整」をオンにすると、内部のテキストの分量に高さが自動的に追従します。
コンポーネントのネスト

コンポーネントの内側にネストされたインスタンスに変更を加えた場合、その変更が外側のコンポーネントのすべてのインスタンスに反映されます。
デザインスペックの強化

デザインスペックコンポーネントステートをサポートしたことにより、デベロッパーはどのコンポーネントに複数のステートが設定されているかを知ることができ、デザインスペック上で各ステートの仕様を確認できるようになりました。
Creative Cloudライブラリの強化

CCライブラリで、デザインシステムの作成と共有ができるようになりました。

アクセス権を管理でき、デザインシステムの更新もチーム全員に適用されます。