Figmaでつくるプロトタイプ。ダイアログのつくりかた3選

こんにちは🌿
BrewusのUIデザイナー、bellです。

いきなりですが、プロトタイプ作るの楽しいですよね。なんというか、自分のデザインしたものが動くと毎回ちょっとした感動があります。

ということで、今回はFigmaのプロトタイプを使ってダイアログ系の表現をつくります。

▼用意した画面

ヘッダーとタブバー、タブバー上の丸いアイコンは「Fix position when scrolling」にチェックを入れて固定表示にしています。

▼完成イメージ

では早速つくっていきましょう🌿

01 | 通常画面遷移で繋ぐ

1番簡単な方法がこれ。画面を「Navigate to」で繋ぐだけ。

用意した画面をそのまま使えるので一瞬で作成できます。
その代わり遷移アニメーションはシンプルなものになりがちです。

【メリット】
・デザイン作成時の画面をそのまま使えるので時間がかからない
・フレームの見た目がオーバーレイだとわかる

【デメリット】
・遷移アニメーションのバリエーションが少ない

02 | オーバーレイで繋ぐ （オーバーレイごと用意）

オーバーレイとその上に表示させたいものを入れたフレームを用意します。

あとは「Open overlay」で繋げるだけ。「Bottom center」と設定している部分でどこを基準に合わせるか選択できます。

しかしPCで見るぶんには問題ないのですが、スマホで実機確認すると画面比率によっては表示が若干崩れる恐れがあります。
このプロトタイプをiPhoneXRのsafariで確認するとオーバーレイ部分が上合わせになってしまい、表示がずれてしまいます。

【メリット】
・通常画面とダイアログ表示時のパーツをそれぞれのフレームで管理できるので修正漏れが発生しにくい
・フレームの見た目がオーバーレイだとわかる

【デメリット】
・実機確認で表示ずれが起こりやすい

03 | オーバーレイで繋ぐ （ダイアログだけ用意）

オーバーレイより上に表示させたいものだけを入れたフレームを用意します。この時、フレームと通常画面の右下の位置が合うように余白をとります。

これを「Open overlay」で繋げます。Overlayを「Bottom right」に設定することで右下を基準にフレームを合わせることができます。

さらに「Add background behind overlay」にチェックを入れることでオーバーレイを表現できます。この下の行でオーバーレイのカラーを指定できますが、Color Style が効かないのでベタ打ちで指定します。

この方法だと、スクロールした状態を保ったままダイアログ表示が可能です。あとオーバーレイサイズが無限なので画面サイズを気にしなくて良いです。

ちなみに「Close when clicking outside」にチェックを入れると「ダイアログ外をタップでダイアログを閉じる」という挙動が一瞬で作れます。これ意外と重宝します。

【メリット】
・オーバーレイのレイヤーが不要になる
・スクロールした状態を保ったままダイアログ表示が可能
・「ダイアログ外をタップでダイアログを閉じる」という挙動が一瞬で作れる

【デメリット】
・フレームの見た目がオーバーレイだとわかりづらい
・設定がやや面倒

この方法はダイアログの位置を直接指定することもできます。

オーバーレイより上に表示させたいものだけを入れたフレームを用意します（ここまでは上の方法と一緒）。この時、不要な余白を削除します（余白あっても問題ないですが、ないほうが作業しやすいです）。

Overlayを「Manual」に設定します。すると、ダイアログ画像が遷移元の近くに出現するので、表示したい位置に合わせます。

これで特殊な位置に出現するダイアログも完璧です。

04 | おまけ・Smart animate

01と挙動は同じですが、Smart animateを使用して実装することも可能です。

用意した画面の見た目も01と一緒なのですが、通常画面とダイアログ表示画面でレイヤーの名前と構成を同じにしておきます（片画面で不必要なものは非表示にします）。

画面を「Navigate to」で繋いだ後、Animationを「Smart animate」に設定します。

この方法は、今回のような単純なダイアログ表示では不要ですが、ダイアログが右下から拡大しながら出てくるなどアニメーションを付けたいときにめちゃくちゃ便利です。Smart animateさえあれば何でも表現できるといっても過言ではありません。

【メリット】
・思い通りの挙動を作りやすい

【デメリット】
・フレーム内のオブジェクト数が増える
・画面作成がやや面倒

プロトタイプ作っていると、自分の想定通りの動きを追求したくなってしまうのは私だけでしょうか？
いろんな機能を試して、これが目的ならこの表現方法かなっていうのがわかったらまた記事にしたいと思います。