【adobe XD】XDぐりぐり動くスライドショーを表現せよ
青木隆之
2020/09/29
今回はXDでちょっとインタラクティブなデザインを表現する方法をご紹介いたします、どうもアオキです！XDを使っていてただオブジェクトを配置するだけではありませんか？リピートグリットを使って満足していませんか？はい、わたしのことですね。シンプルなツールなので使用方法をあんまり深堀りしていませんでしたが、使いようによってはもっと表現豊かにデザインすることができます。
XDぐりぐり動くスライドショーを表現せよ
まずはこちらを御覧ください。よく見るスライドショーですね。ここではメンバー紹介として配置してますが、たとえばアパレルですとかECですとかよく使われているレイアウトの一つだとおもいます。動きとしては左右にある隠れているカードをスワイプすることで動かせるのが想像できますよね？ここでフロントエンジニアさんに言葉で説明するより、見た目で表現したほうが正確に伝わります。XDではそれば出来てしまうんです。
動く前と動いた後のデザインを用意する
設定の仕方は簡単です。動く前と動いた後のデザインを用意してそれをインタラクションでつなげるだけです。まずはこういうものを用意します。
次にオブジェクトをコピーします。
動いた後を想像して二枚目の写真のサイズを調整します。
一枚目のオブジェクトを選択して二枚目にインタラクションをつなげます。ここでトリガーは「ドラッグ」を選択します。
また二枚目から一枚目に戻ることが必要なので逆にインタラクションをつなげます。
これで完成しました！それでは実際にみてみましょう。
グリグリうごきます。
アイデア次第ではいろんな表現がデザイン段階で伝えることができます。なかなか言葉で伝えるのには限界がありますので、このような便利な機能を使って制作をスムーズに効率的に行っていけたらいいですね。
