アコーディオンメニュー動作時のコンテンツ調整について

アコーディオンメニューの開く方向に配置したコンテンツをアコーディオンメニューの開閉によって切り替えたいわけですね。

もしアコーディオンメニューをステート間の自動アニメーションを利用して開閉させている場合、アートボードが変わることはないので、アートボード上にあるアコーディオンメニューとコンテンツが同じグループでスタック機能が有効になっていたとしても配置が換わることはありません。

なので、アコーディオンメニューをコンポーネントにしている場合には、二つの方法のどちらかで実現します

方法１：

アコーディオンメニューとコンテンツをグループ化してスタックを有効にしたものを準備し、各メニューが開いている状態のアートボードを作成して（メニューの数×見せたいコンテンツのだけアートボードが必要）、画面遷移を設定する

方法２：

アコーディオンメニューのコンポーネントの中にコンテンツを入れる。メニューの開閉のステートを作る時にすべてのステートで同じコンテンツを入れておき、ステート間の自動アニメーションをつける

画面数が多い場合は方法２のほうが楽だと思います。

機能としてはこのあたりの特徴を押さえておくと良いです。

現在のXDでは、すべてのレスポンシブサイズ変更の機能はデザインモードで操作しているときのみ動作します。スタック機能によるインナースペースの維持はデザインモードで編集しているときだけで働く機能です。

プレビューでユーザーアクションに合わせて位置を変えたい場合は、アートボードまたはステートでその状態を作ってやらなければなりません。

自動アニメーションは2種類の実現方法があり、一つは二つのアートボード間の変化、もう一つは二つのステート間の変化を補完します。

アートボード間の自動アニメーションと、ステート間の自動アニメーションは同時に設定できないので完全に独立して動きます

この特徴があるので、ホバーでツールチップがでるようなボタンを作っても表示に影響が出ません。