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

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

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

Adobe XD 2020年10月の新機能

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で開いたら、「インストール」ボタンをクリックするだけです。

Visual Studio Codeのキャプチャ

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

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

サイトのキャプチャ

コードスニペット

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

サイトのキャプチャ

コード補完

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

サイトのキャプチャ

Adobe XDの新機能

サイトのキャプチャ

Adobe XDの新機能

  • 3D変形
    3Dスペースでオブジェクトを回転、遠近法で表示、奥行きの表現もリアルな外観も瞬く間にできます。
    command+T(ctrl+T)で3D変形がオンになり、テキスト・画像をはじめグループにも3Dを適用できます。
  • 共同編集
    共同編集機能がベータから公開版になりました。
    チーム全員でリアルタイムでの共同作業が可能です。
  • 高さを自動調整
    幅を固定したまま、テキストレイヤーのコンテンツに応じて高さを自動的に調整できます。
    「自動高さ調整」をオンにすると、内部のテキストの分量に高さが自動的に追従します。
  • コンポーネントのネスト
    コンポーネントの内側にネストされたインスタンスに変更を加えた場合、その変更が外側のコンポーネントのすべてのインスタンスに反映されます。
  • デザインスペックの強化
    デザインスペックコンポーネントステートをサポートしたことにより、デベロッパーはどのコンポーネントに複数のステートが設定されているかを知ることができ、デザインスペック上で各ステートの仕様を確認できるようになりました。
  • Creative Cloudライブラリの強化
    CCライブラリで、デザインシステムの作成と共有ができるようになりました。
    アクセス権を管理でき、デザインシステムの更新もチーム全員に適用されます。

sponsors

top of page

©2020 coliss