この記事ではAdobe XDのステート機能について紹介していきます。
ステート機能は、Adobe XDのおすすめできる便利機能１つです。
ぜひ、今回の記事で使い方をマスターしていきましょう。
補足
今回のステート機能は、「プロトタイプ機能」と共通する考え方が登場します。
まだ、以下の記事を先に読んでおくとよりスムーズな理解につながります。
ステート機能について学ぼう
まずはステート機能についてのイメージを膨らませていきましょう。
ステート機能とは
ステート機能とは、Adobe XDの要素に状態変化をつけることができる機能です。
Webサイトの要素は「ホバー時」「クリック時」など状態の変化を持たせる必要が出てきます。
ステート機能は、要素の見た目の変化をデザインデータ内で設定することができる機能なのです。
ステート機能の例
画像の例は、デザインデータのみで実装された内容になります。
コードを書かずとも、ボタンがホバーした状態を確認することができています。
このステート機能を使うことで、要素の状態変化の共有をデザイナーとエンジニアの間でスムーズに行うことができます。
ステート機能の使い方
それでは次に、ステート機能の使い方について学んでいきましょう。
ホバーステートという方法で、ボタンに対して「ホバー」した際の状態変化をつけていきます。
デザインを作成する
まずは、ステート機能をしようするためにボタンを作成します。
練習用のデザイン
皆さんも簡単なボタンを１つ用意してみましょう。
ホバーステート完成の動き
今回は、上記の例のようにボタンをホバーするとテキストとボタンの色が反転する状態変化を作成します。
要素をコンポーネント化する
ステート機能を使用するためには、要素をコンポーネント化する必要があります。
ボタンをコンポーネント化する
ボタンを選択して、コンポーネント化していきましょう。
コンポーネント化すると、画面右側のプロパティに「初期設定のステート」という項目が追加されます。
コンポーネント化のショートカット
- Windows：Ctrl K
- Mac：Command K
ホバーステートを作成する
ボタンをコンポーネント化できたら、ホバーステートを作成します。
ホバーステートを追加する
プロパティの「初期設定のステート」という項目の右側にある「+アイコン」に注目しましょう。
「+」ボタンを押すことで「ホバーステート」を作成することができます。
初期設定のステートとホバーステート
ここで、ステート機能の考え方について学んでいきましょう。
Adobe XDのステート機能とは、「ステートを切り替えて状態変化を実装する」するのです。
なので、要素にホバーの状態変化を作成する際は、以下の２つを設定する必要があります。
- 初期設定のステート：通常状態の見た目
- ホバーステート：ホバー状態の見た目
初期設定のステートは通常状態の見た目なので、既に作成済みです。
次は、ホバー状態の見た目の作成を行います。
ホバーステートの状態でプロパティを編集する
プロパティから「ホバーステート」にステートを切り替えましょう。
この状態のまま、要素の見た目を変更していきます。
テキストとボタンの塗りを反転させる変更を行いました。
今回は、わかりやすいようにテキストの内容も変更してみましょう。
以上でホバー状態の見た目を完成です、
「初期設定のステート」の状態に戻す
ホバーステートが作成できたら、要素の見た目を初期設定のステートに戻しておきましょう。
（戻しておかないと、見た目がずっとホバー状態のままになってしまいます。）
見た目を切り替えているだけなので、先ほど設定したホバーステートはきちんと保存されています。
プレビューする
作成したホバーステートを確認します。
プレビュー画面でホバーする
プレビュー画面でホバーをしてみましょう。
設定したホバーステートに変化していれば成功です。
ステート機能を使いこなそう
ここまでで、ステート機能の「概要」と「使用例」について紹介していきました。
デザインデータは見た目を作って終わりということではなく、
「どのような挙動で状態の変化が起きるのか」というところまで設定を行いましょう。
次の工程であるコーディングを意識して、エンジニアと仕事のやりとりがスムーズに行えるデザイナーを目指していきましょう。
