【adobe XD】プラグインを使わないで遷移図を表示しよう | Dev Driven 開発・デザインチーム 【adobe XD】プラグインを使わないで遷移図を表示しよう | 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】プラグインを使わないで遷移図を表示しよう

青木隆之
2020/10/01

 

開発にあたり画面の遷移を示す図、遷移図ってとっても大事ですよね。フロントエンジニアやサーバーエンジニアにデザインを引き継ぐ際に重宝します。これがないとどの画面がどこに繋がっているか分からりずらいので開発をスムーズに進めるためにも必要です。またデザインにおいても足りない画面がわかるので抜け漏れがないか確認するのも使います。

どうやって表示するの?

以前まではXDには遷移図を表示する機能がありませんでした。プラグインを利用することで遷移図を作成していたのですが、さすがはadobe様、バージョンアップで遷移図を作成してくれるようになりました。

まずは「共有」で「表示設定」を「開発」にしてリンクを作成。

リンクを開いてサムネイル画面を表示し、画面右上にある「フロー表示」をクリック

すると、、なんていうことでしょう。遷移図がすでにできています

XDをデザイン段階でインタラクションな動きを表現できるUIに特化したツールでとっても便利です。開発全体を意識した作りになっているので遷移図などかゆいところに手が届く機能もバージョンアップで追加されました。このような機能をつかってスムーズな開発を行って行きたいですね!