この記事はAdobe XD Advent Calendar 2018で公開した、画面一覧とプロトタイプをつなぐ実践記録です。
Adobe XDは現在メンテナンスモードにあり、以下のURL構造と画面例は2018年当時のものです。
Adobe XD Advent Calendar 2018 12/8
現在の共有では、XDの共有モードでリンクを作成・更新し、レビュー画面で目的のアートボードを開いてURL全体をコピーする方法を優先してください。
公開・招待制・パスワード付きのアクセス設定を確認し、閲覧する相手の権限でリンクが開けるか確かめます。
当時は、URLを部品に分けてスプレッドシートで組み立てる方法を使いました。
新しいリンクでも同じ構造になるとは限らないため、ここからは既存資料を保守する際の参考として読んでください。
具体的には、UI画面リストからXDの各画面をすばやく開くための工夫を取り上げます。
作成したリストから、対象の画面へ直接遷移できるようになります。
当時の運用では、アートボードIDが共通の版に限り、プロトタイプIDを差し替えて画面を切り替えていました。
別ファイルや新規作成した画面で同じIDが使えるとは限りません。
Adobe XDのプロトタイプリンクの仕様
URLの構造を調べる
まずはXDが発行するURLの仕組みを確認します。
2018年に確認した共有URLは、下記の形式でした。
・ホームアートボードの場合
https://xd.adobe.com/view/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-xxxx/
・その他のアートボードの場合
https://xd.adobe.com/view/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-xxxx/screen/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/sample
・「フルスクリーンで開く」を有効にした場合（URL末尾に「?fullscreen」が付加されます）
https://xd.adobe.com/view/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-xxxx/screen/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/sample?fullscreen
URLの構成要素
URLを比較すると、XDの個別画面URLは以下の要素で構成されていることがわかります。
https://xd.adobe.com/view/プロトタイプID/screen/アートボードID/画面名+オプション
これは当時確認した構造で、現在のURLを手作業で変更するための仕様保証ではありません。
※プロトタイプIDは、プロトタイプの新規リンクを作成するたびに新しく発行されます。
当時はプロトタイプIDを変更して版を切り替え、各リンクの遷移先を個別に確認していました。
※アートボードIDは、アートボードを新規作成するごとに固有のIDが割り振られます。
当時は画面名部分が異なっていても、プロトタイプIDとアートボードIDで対象画面へ移動する挙動を確認しました。
現在の資料では、ブラウザーに表示されたURL全体を保存する方が確実です。
画面リンク付きUI画面リストの作成手順
今回はGoogleスプレッドシートを使って作成します。
シートのベースを作成する
取得したXDのURLをもとに、「プロトタイプID」「画面名」「アートボードID」「URL」の各列を入力します。
下記の式ではB1にプロトタイプID、B4にscreen/から始まるアートボードのパスを入れます。
IDが誤っている場合の転送先は保証されないため、一覧を共有する前にすべてのリンクを確認してください。
ハイパーリンクを設定する
URL列にはHYPERLINK関数を設定し、クリックで該当画面を開けるようにします。
=HYPERLINK("https://xd.adobe.com/view/"&$B$1&"/"&B4,"リンク")
※IDなどの固定値は、スプレッドシートの「データ」＞「名前付き範囲」などで定義しておくと管理しやすくなります。
ホームアートボードのIDを取得する方法
ホームに設定されているアートボードの固有IDを取得する手順です。
当時は、一時的に別のアートボードをホームに設定してリンクを更新し、目的のIDを取得していました。
公開中のプロトタイプの入口が変わるため、現在はURLを得る目的だけでホームを変更せず、対象画面を開いてURLをコピーする方法を優先します。
当時の方法を検証する場合は作業用の複製で行い、ホーム設定と共有先を確認してください。
Adobeの製品に関する記事は、ほかにもあります。
まとめ
realtimeboardなどを使った画面遷移図や、実機プレビュー用のプロトタイプと併用できます。
関係者全体で手軽に共有・確認できる形式としては、表計算ツールで整理されたUI画面リストが扱いやすい場面も多くあります。
今回は、UI画面リストからAdobe XDの各画面へスムーズに遷移するためのURL活用法を紹介しました。
既存のXD資料を保守する際は、画面名・共有URL・更新日を一覧に残すと、リンク切れや版の取り違えを確認しやすくなります。
当時の翌日の担当は i_mairyさんの担当です。
Adobe XDのほかの操作やTipsは、まとめ記事から確認できます。
