MAXが開催され、あわせてAdobe製の各アプリケーションの大幅なアップデートやiPad向けアプリなどの発表がありました。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まとめホバーステートは今まで別のコンポーネントとして作るしかありませんでしたが、今回のアップデートでかなり表現しやすく、コーダーに伝えるのも簡単になったのではないでしょうか。ホバーだけでなく今回作成したようなトグルスイッチの他にもチェックボックスやラジオボタン、タブ切り替えなどのデザインや、会員/非会員など違う状態の表現にも使えると思います。アップデートして、使用してみてください。Entry2020.02.17「JPG-??」とか「PNG-??」の??ってなんだろう2020.02.10カレーパーティーが開催されました。