【adobe XD】コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する(データ付き) | Dev Driven 開発・デザインチーム 【adobe XD】コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する(データ付き) | 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する(データ付き)

青木隆之
2021/05/07
+3

コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する

あなたの夢にお邪魔します

イッツミー

アオキタカユキです

どうも皆様御機嫌いかがでしょうか?今回は最新のバージョンアップで追加された新トリガー「ボイスコマンド」をご紹介します。要はアレクサみたいなやつです。話かけるとXDが動作してくれます。

文章だとイメージがつきにくいので動画を用意しました。架空のアプリですが動作の流れとしては「ケアリー」と話しかける→ボイス入力のポップアップが立ち上がる→「今日の体調は?」と話しかける→結果画面に遷移する。という導線を想定してます。
コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する

まずはこんなUIデザインを用意。今回は4枚のデザインを用意しました。
コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する
1枚目から2枚目へのトリガーを「音声」してコマンドは「ケアリー」と設定。アクションは「自動アニメーション」にしました。(自動アニメーションにしたのは2枚目でポップアップが立ち上がる動きをしたいからです。)
コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する
コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する

2枚目から3枚目もトリガーを「音声」してコマンドは「今日の体調は」と設定。アクションは「自動アニメーション」にしました。アプリが音声を認識する画面を表現です。

コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する
コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する

最後に3枚目から4枚目はトリガーを「時間」してディレイは「1秒」と設定。アクションは「自動アニメーション」。自動的に結果画面への遷移を表現してます。

コンポーネントのステートの 新しいトリガー「ボイスコマンド」 でUIを操作する

おわりです。これにて設定は完了。これでアレクサ顔負けのボイスコマンドのUIを作成することができます。

最後に今回作成したXDデータを用意しましたのでこちらからダウンロードして触ってみてください。

XDはUIに特化したツールなのでこういう機能も用意してくれてます!効率的にUIを作成してリッチにアウトプットしていきましょう!

+3