見出し画像

Adobe XD 2021年5月の新機能まとめ

Adobe XDの新機能が2分で分かる動画を作成しましたので、まずはそちらをご覧ください。

本記事は、こちらの動画で解説し切れなかった部分を深掘りする内容となります。是非、動画と合わせて最後まで読んでみてください!

共同編集のライブカーソル

こちらの機能が今回の目玉機能となるようです。(公式サイトでオシャレな感じの画像が付いています)

スクリーンショット 2021-05-17 4.08.28

今までは、共同編集を行う際にどのユーザーがどこを操作しているかは、オブジェクトを選択するまで分からないという仕様になっていました。

今回のアップデートで他のユーザーのカーソルも常時表示されるようになり、よりリアルタイムな共同編集が可能となりました。

画面収録 2021-05-14 2.20.09.00_00_11_37.静止画003

これによって、カーソルで指しながら「ここのデザインについて〜」と話せるので、オンラインMTGなどでも使いやすいと思います。

カーソルを見失った場合も安心です。画面上部の共同編集者アイコンをクリックすることで、すぐさま共同編集者が見ている画面に移動できます。

画面収録 2021-05-14 2.20.09.00_00_16_40.静止画004

ご存知の方も多いかとは思いますが、こちらの機能は競合ツールであるFigmaにはずいぶん前に実装されている機能です。Adobe XDが後追いする形での実装になりました。

また、共同編集の始め方については以下の記事をご覧ください。

環境設定メニュー

今まで、「環境設定」は存在していたものの、グレーアウトしておりクリックできない項目でした。
今回のアップデートで「環境設定」がクリック可能となりました!

しかし、現状では変更可能な項目は「言語」と「共有時にリンクを自動生成」の2つとなっています。

画面収録 2021-05-14 2.20.09.00_00_31_16.静止画005

「言語」はUIが選択した言語に変更できるという機能です。(アプリの再起動が必要)

「共有時にリンクを自動生成」という項目については、「選択アートボードの共有」にて解説します。

環境設定で選択できる項目はどんどん増えていき、細かい設定が行えるようになるのでは、と予想しています。

選択アートボードの共有

アートボードを選択した後に、共有ボタンを押すという2ステップで共有リンクを作成できるようになりました。

画面収録 2021-05-14 2.20.09.00_00_45_23.静止画006

ボタンを押すとフローが作成され、共有リンクも作成されます。

画面収録 2021-05-14 2.20.09.00_00_51_47.静止画007

今までは、アートボードを共有するには、プロトタイプモードに移動した上で手動でアートボード同士をリンクする必要がありました。

この「選択アートボードの共有」が何をしてくれているのか見てみましょう。共有ボタンを押した段階で、選択していたアートボードに対して自動でリンクを設定(フローを作成)します。その後、共有リンクを作成するところまでを1クリックでしてくれているのです。

画面収録 2021-05-14 2.20.09.00_00_58_47.静止画008

しかし、この時の「リンクを知っている全てのユーザー」が閲覧可能な状態となります。
これは、社外秘のデータを扱う際には危険な設定です。

そんな時には、「環境設定」→「共有時にリンクを自動作成」をオフの状態にします。

画面収録 2021-05-14 2.20.09.00_00_59_19.静止画009

これで、直ぐに共有リンクが作られるということはなくなり、安全な設定(招待ユーザーのみ閲覧可能など)を行った上での共有リンクの作成が可能です。

また、共有リンクの注意点として、フローを跨がるような形で共有ボタンをクリックすると以下のようなダイアログが表示されます。
あくまで、「フローを作り、共有することを自動化する機能」なのでフローで実現できないような形での共有は行えません。

スクリーンショット 2021-05-17 4.45.46

純粋に共有だけを行いたい際に、リンクをひたすら繋ぐという不毛な作業をした経験のある方にとっては待望の機能だったのではないでしょうか?
しかし、誤操作などで意図しないフローや共有リンクが作成される恐れがありますので、慎重な扱いを心がけましょう。

「トグルステート」ショートカット

今までトグルボタンのように、2つの状態をクリックで行き来するプロトタイプを作ろうと思うと以下のような手順になっていました。

1.「新規ステート」の追加
2.「新規ステート」でデザインを調整
3.プロトタイプモードへ
4.「初期設定のステート」から「新規ステート」へのリンクを作成
5.「新規ステート」から「初期設定のステート」へのリンクを作成
6.完成!

今回のアップデートで、追加された「トグルステート」ショートカットを使うことで、上記の3~5を自動的に設定してくれます。
つまり、これからのトグルボタンの作り方は以下の手順になります。

1.「トグルステート⚡️」の追加
2.「トグルステート」でデザインを調整
3.完成!

画面収録 2021-05-14 2.20.09.00_01_16_03.静止画010

やっていることは「初期設定のステート」⇄「トグルステート」の相互リンクを自動で設定してくれているだけですが、作業をかなり削減してくれます。

Apple Silicon M1対応(ベータ版)

動画では、省略しましたがもう1つ新機能(?)がありました。
Apple Silicon M1プロセッサーを搭載したデバイスで動作可能になったという内容です。

ただし、M1が動作するのはベータ版アプリのみで、以下のリンクからのダウンロードが必要です。

ベータ版とのことですので、バグなどがあるかもしれませんがM1 macを持っている方は是非、試してみてください!(僕は持っていないので、操作感など教えていただけると嬉しいです)

まとめ

今回のアップデートはショートカット機能(選択アートボードの共有、トグルステート)と共同編集の強化(共同編集のライブカーソル)がメインでした。

特に、ショートカット機能は「この操作がめんどくさかったんだよ!」という箇所を的確に改善してくれている印象でした。

また、共同編集のライブカーソルも共同編集の実用性をグッと上げてくれる機能でした。
ただ、Adobe XDの共同編集は不安定な印象なので、こちらが改善されているかも確認していこうと思います。

最後に、これからもnoteやTwitterその他の媒体でAdobe XDやFigmaなどの情報を発信していきますので、是非フォローをお願いします!

ここまで読んでいただきありがとうございました! もし気に入っていただければ投げ銭よろしくお願いします🍤 投げ銭でエビフライを食べに行きます