開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソースModelessDialogモードレスなダイアログです。ダイアログを表示したまま、ダイアログの裏側の画面も操作できます。基本的に、ダイアログと裏側の画面を同時並行で閲覧・操作する場合に使います。注意ダイアログを乱用しないModelessDialogは、ユーザーが直前まで見ていた画面の一部を覆い隠します。ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。レイアウト基準サイズダイアログの横幅サイズの基準値は以下のとおりです。サイズに意図がない場合は、下記の値から想定に近い値を選択してください。幅の最小値として使います。幅の最大値として使います。スマートフォン(SP)スマートフォンは表示領域が狭いため、サイズの最大値/最小値は同じとします。幅の最大値/最小値として使います。propsで表示位置を指定できます。指定しない場合、画面の天地左右中央に表示されます。ModelessDialogの場合は、ダイアログを開く操作をした箇所の付近に表示します。モーダルなダイアログと違って、ダイアログの裏側の画面がスクリム(幕)で隠されないため、開く操作をした箇所から遠い位置に表示すると、ユーザーがダイアログを見つけにくいためです。アクセシビリティキーボード操作ESCキーを押すことでダイアログを閉じることができます。構成ModelessDialogは以下の要素で構成されます。ヘッダーエリアヘッダーエリアの左端にはダイアログのタイトルが、右側にはダイアログを閉じるボタンが配置されます。ダイアログのタイトルは、表示する情報を簡潔に表現するものをつけます。ヘッダーエリアをドラッグしてダイアログの位置を移動できます。本文ユーザーに提示したい情報を表示します。フッターエリア(任意)必要に応じてアクションボタンやリンクなどを配置します。