【adobe XD】コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する（データ付き）
あなたの夢にお邪魔します
イッツミー
アオキタカユキです
どうも皆様御機嫌いかがでしょうか？今回は最新のバージョンアップで追加された新トリガー「ボイスコマンド」をご紹介します。要はアレクサみたいなやつです。話かけるとXDが動作してくれます。
文章だとイメージがつきにくいので動画を用意しました。架空のアプリですが動作の流れとしては「ケアリー」と話しかける→ボイス入力のポップアップが立ち上がる→「今日の体調は？」と話しかける→結果画面に遷移する。という導線を想定してます。
まずはこんなUIデザインを用意。今回は4枚のデザインを用意しました。
1枚目から2枚目へのトリガーを「音声」してコマンドは「ケアリー」と設定。アクションは「自動アニメーション」にしました。（自動アニメーションにしたのは2枚目でポップアップが立ち上がる動きをしたいからです。）
2枚目から3枚目もトリガーを「音声」してコマンドは「今日の体調は」と設定。アクションは「自動アニメーション」にしました。アプリが音声を認識する画面を表現です。
最後に3枚目から4枚目はトリガーを「時間」してディレイは「1秒」と設定。アクションは「自動アニメーション」。自動的に結果画面への遷移を表現してます。
おわりです。これにて設定は完了。これでアレクサ顔負けのボイスコマンドのUIを作成することができます。
最後に今回作成したXDデータを用意しましたのでこちらからダウンロードして触ってみてください。
XDはUIに特化したツールなのでこういう機能も用意してくれてます！効率的にUIを作成してリッチにアウトプットしていきましょう！
