Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@seaka829(Ryota Akase)in株式会社インテック

【AdobeXD】②横スワイプで画面遷移

Last updated at Posted at 2021-10-03

はじめに

【AdobeXD】①ボタンクリックで画面遷移の続きです。
今回は、横スワイプで画面遷移するデザインの作成手順について記載する。

作成手順

1. ページを示すドットを追加

  • 画面下にドットを追加
  • 一番左のドットを黒塗りして画面Aを1ページ目とする

1.gif

2. 遷移先画面の追加

  • 遷移先の画面A~Eを追加
  • ページを示すドットを画面に合わせて修正

2.gif

3. 横スワイプ時の遷移設定

  • 画面Aでドラッグしたとき画面Bに遷移するよう設定
  • 画面B~Dに関しても同様の設定を実施

3.gif

4. プレビューで確認

右上の▶︎をクリック
プレビューで遷移を確認

4.gif

おまけ

スマホアプリで確認
5.gif

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?