【Adobe XD】スワイプ操作で液状に動くプロトタイプを作るテクニック

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

Adobe XDではスマホに合わせたサイズでデザインを作ることができます。

作成したデザインのプロトタイプをお手持ちのスマホから操作できることはご存知でしょうか?

今回XDのみで液状に動くプロトタイプを作ったのでこちらの作り方について紹介します。

作成したプロトタイプを確認したい方は目次から飛んでください。

※XDの基本操作ができることを前提に紹介しています。ご了承ください。

作品はInstagram、Twitterで随時紹介しています

 

この投稿をInstagramで見る

 

Shun(@shun_webdesign)がシェアした投稿

プロトタイプをスマホから確認する

これまでXDの自動アニメーションを使ったプロトタイプの作成方法を紹介してきましたが、今回はスマートフォンの画面サイズに合わせたプロトタイプを作成します。

スマートフォンサイズのデザインを作成してもイメージしにくいと思ったかたもいると思います。

専用のアプリをインストールすることで、スマホをを使って実際に作成したプロトタイプを確認することが可能です。

アプリのインストール

iPhoneを使用している方はこちらからインストール。

Androidを使用している方はこちらからインストール。

クラウドからプロトタイプを選択

Adobeにログインすることで、Creative Cloudに保存しているXDデータを選ぶことで確認が可能になります。

画面下のタブから雲のアイコンをタップ。

ファイルの新しい順にファイルが並んでいます。見たいファイルを選べば閲覧できます。

※編集やコメントはできません。

PCと繋いでリアルタイムで確認

Live Previewを使えば、PCとスマホをコード(ケーブル)で繋ぐことでXDで編集したものを直接確認できます。

画面下のタブからスマホのアイコンをタップして確認してみてください。

作成したプロトタイプ

今回作成したプロトタイプをボタンから確認できます。

作るのが難しそうと思った方もどんな風に動くかイメージがつきやすくなると思います。

プロトタイプを確認する

合わせて読みたい

XDでキャラクターアニメーションを作る方法を解説 【Adobe XD】スワイプ操作でキャラクターアニメーションを作る方法を解説 Adobe XD スライダー作成方法 【Adobe XD】ドラッグトリガーでスライダーを作ってヌルヌル動かす

作成手順

アートボードをこのようにして並べたものを連続で動くようにしていきます。

作成手順
  1. デザインの作成
  2. 自動アニメーション
  3. ドラッグトリガーの設定
  4. スマホでのプロトタイプ確認

※XDの基本操作ができることを前提に紹介しています。ご了承ください。

XDの操作が慣れていない方はこちらから

【Adobe XD】脱初心者!サッと使える知っておくと便利なTips集
STEP.1
デザインの作成

上から順に黒:slide01 白:slide02 赤:slide03

上記画像のように5枚のアートボードでアニメーションが一巡するように作成します。

左上から順にリンクを繋げていきます。

今回は一巡したものを3回分用意しました。

 

スワイプのレイヤー画面

レイヤーは上記画像の順に並べます。

ページが遷移したときに「slide02」が表示されるイメージです。

ボタンと遷移先の色が一緒になるように作成するとシームレスに見えます。

 

遷移後にレイヤーが画面を覆うようにパスを作ります。

 

作成のポイント
  • スワイプさせるレイヤー(slide01,slide02)はアピアランスから「差異」を選択し、色が反転するようにしています。
  • 矢印のアニメーションはLottieアニメーションです。(お好みで付けてください)
STEP.2
自動アニメーション

「4.スワイプ前」以外の画面はトリガーを「時間」に設定した自動アニメーションです。

「5.スワイプ」した後に「1.初期画面」に遷移するように作ります。

各アートボードのレイヤー名が同じになるように作成してください。(でないと自動アニメーションが動きません)

 

STEP.3
ドラッグトリガーの設定

一番重要な箇所です。ボタンをトリガー「ドラッグ」に設定します。

リンク先をパスが伸びた状態のボードに繋げます。

 

ここまでの状態を確認するとドラッグで動かせるようになっているのがわかります。

スワイプ後のボードを初期ボードに繋げたら完了です。

STEP.4
スマホでのプロトタイプ確認

プレビューボタンもしくは、前述したスマホからプロトタイプで確認し、動いたら完成です。

本当にお疲れさまでした。

まとめ:ドラッグトリガーの使い方だけでもOK

今回は以下について紹介させていただきました。

作成手順
  1. スマホでのプロトタイプ確認方法
  2. デザインの作成
  3. 自動アニメーション
  4. ドラッグトリガーの設定

紹介した全ての手順をやろうとすると難易度が高いと感じる方も少なくないと思います。

今回紹介したドラッグトリガーの設定だけでも使えるとスワイプで滑らかに動くのが体感できます。

是非、試してみてください。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA