ブログ

【Adobe XD】コンポーネントのステート

2019.11.11 : Other Staff
Design

先日Adobe MAXが開催され、あわせてAdobe製の各アプリケーションの大幅なアップデートやiPad向けアプリなどの発表がありました。
と、いうわけで今回はAdobe XDの新機能「コンポーネントのステート」について。

コンポーネントのステート

さてさて、文字通りではありますが「コンポーネント」に「ステート」の機能が付きましたよ、ということでございます。
ステート(State)とは「状態」のことですね。

まずはコンポーネントを作成

とりあえず、コンポーネントを作成(Command+K)します。
すると右側に「コンポーネント(マスター)」という項目が現れます。
コンポーネント化したものは「初期設定のステート」、つまり初期状態として認識されます。

「+」ボタンから「ホバーステート」を選択して、こんな感じのデザインを作ってみました。
こちらが所謂マウスオーバーされた状態となります。

ホバーステートに関しては、プロトタイプを編集したりという作業も必要ありません。
共有すると、下記のような形になります。
https://xd.adobe.com/view/315b0f54-2d99-47f3-467f-54518e6998a7-476a/?fullscreen&hints=off

続いてクリック(タップ)された時のステートを作ってみます。

同じくコンポーネントを作成

先ほどと同じように、コンポーネントを作成します。

今回の場合は「+」ボタンから「新規ステート」を選択して、クリック(タップ)された後の状態をデザインします。
名前は「ON」にして、よく見るトグルスイッチを作ってみました。

続いてプロトタイプモードへ。
「初期設定のステート」から、トリガーを「タップ」、アクションを「自動アニメーション」に設定して、「ON」のステートへ繋ぎます。

これだけでは「ON」状態から元に戻れません。
次は逆に「ON」から「初期設定のステート」へ繋ぎます。
すると、こんな感じに仕上がりました。
https://xd.adobe.com/view/517b0b05-d7fc-427e-67fd-2070d2143480-274a/?fullscreen&hints=off

まとめ

ホバーステートは今まで別のコンポーネントとして作るしかありませんでしたが、今回のアップデートでかなり表現しやすく、コーダーに伝えるのも簡単になったのではないでしょうか。

また、ホバーだけでなく今回作成したようなトグルスイッチの他にもチェックボックスやラジオボタン、タブ切り替えなどのデザインや、会員/非会員など違う状態の表現にも使えると思います。

是非アップデートして、使用してみてください。

アーカイブ

資料ダウンロード 制作依頼・ご相談
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談