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

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

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

Adobe XDの新機能

まずは、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の新機能

Adobe XDの新機能

• 3D変形

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

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

• 共同編集

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

  チーム全員でリアルタイムでの共同作業が可能です。

• 高さを自動調整

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

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

• コンポーネントのネスト

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

• デザインスペックの強化

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

• Creative Cloudライブラリの強化

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

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