XD ドラッグドロップの表現

XDでドラッグ&ドロップの表現。

例としてアートボード上に色違いの矩形オブジェクトを配置する。

そのアートボードをコピーして左右のオブジェクトを入れ替える。
その後「プロトタイプ」モードでリンクを設定する。

この場合はどちらも赤い矩形にお互いのページへのリンクをつける。
その際にトリガーの設定をドラッグにする。

これだけで動画のような動きが可能となる。

XD トグルボタンの表現

XDでトグルボタンの表現は簡単に作れそうだったが(結構必要な気がする)なさそうなので画面遷移の機能を使って実装した。
(其のうちできるようになりそうな気が。。 現在2019年7月です。)

何を勘違いしていたのか、ちゃんと出来たので別記事に改めました。
こちらからどうぞ

 

プレイボタンをクリック(タップ)すると、ポーズボタンに変わるアレです。

やり方

  1. トグルにしたいボタンにリンクをはる。
  2. リンク先としてアートボードを用意(画面サイズは同じ)
    ※アートボードの背景と枠線はチェックを外しておく(透明状態)
  3. 同じサイズ、同じ位置にボタンを配置する。
  4. トリガー:タップ、アクション:オーバーレイに設定する
  5. ポーズボタンにもプレイに戻るようにリンクを同様にはる

※ボタンだけでボタンと同じサイズのアートボードを作って配置位置を指定できれば良さそうだけど、それはできないので、同じ画面のアートボードを作り、同じ位置に配置してます。

※注意

ポーズ状態の時に最初のプレイ画面の他の機能が使えなくなってしまうので、実際の画面の挙動とは異なってしまうので、ややモヤモヤ。。
状況によっては使えるかも。

XD ペーストボード

XDで作業をしていたらレイヤーパネルにペーストボードという名称がいつの間にか出来ていた。

アートボード以外の領域にオブジェクトを配置すると自動的に出来る。
アートボードと同じようにオブジェクトをまとめておく機能。
マスターコンポーネントをペーストボード上に配置しておくと管理しやすい。