Adobe XDをもっと使いこなすヒント！第60回ステート機能でチェックボックスをつくる

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ステートを利用したチェックボックスのデザイン手順を紹介する9つのツイートを紹介します。

Tip 1. コンポーネントの作成とインスタンスの配置

#AdobeXD #ProTip Create a new reusable component by selecting one or more objects or groups, and either clicking on the + in the document assets section of the Libraries panel, or by using the keyboard shortcut Cmd+K (Mac) or Ctrl+K (Win). @AdobeXD pic.twitter.com/oE1UhemnXn

— Elaine Chao (@elainecchao) November 16, 2020

まずは再利用可能なコンポーネントを作成します。正方形のシェイプを選択して、ライブラリパネルを開きドキュメントアセット内の「コンポーネント」右側の＋アイコンをクリックするか、Cmd+K (Mac) or Ctrl+K (Win) ショートカットキーを使用します。

#AdobeXD #ProTip Create a new instance of the component by either copying a component or dragging it to the canvas from the Libraries panel. Instances will inherit from the main component. @AdobeXD pic.twitter.com/82aoOFtdGg

— Elaine Chao (@elainecchao) November 17, 2020

作成したコンポーネントをコピーするか、ライブラリパネルからドラッグして、インスタンスをアートボード上に配置します。追加したコンポーネントには分かりやすい名前を付けておきましょう。名前の変更はライブラリパネル内で行えます。

Tip 2. コンポーネントにステートを追加する

#AdobeXD #ProTip Components can have states, which are different variations. With a state selected, click on the + icon to create a new state based off of the selected state. @AdobeXD pic.twitter.com/OgHE8C46Ym

— Elaine Chao (@elainecchao) November 18, 2020

メインコンポーネントにはステートを追加できます。最初に変換したコンポーネントを選択したら、プロパティインスペクタの「初期設定のステート」の右の＋アイコンをクリックします。「新規ステート」を選択すると、ステートが追加されます。ステートには分かりやすい名前を付けておきましょう。

#AdobeXD #ProTip States are independent per instance, which means that you can determine the default state of a component on an instance-by-instance basis. If you have theme variations stored in the same component, you can select your initial state per instance. @AdobeXD pic.twitter.com/fRzlVG5ZUK

— Elaine Chao (@elainecchao) November 19, 2020

ステートが追加されたコンポーネントは、インスタンスごとに表示するステートを指定できます。上の動画では、左のインスタンスに追加したステート、右のインスタンスに初期設定のステートが指定されています。このようにしておくと、2つのステートの見た目の確認が容易になります。

Tip 3. ステートを編集する

#AdobeXD #ProTip Double click your component with a state selected to edit the state. Similar to other types of groups, you can either add content directly or copy/paste into it. Changes are immediately propagated to the appropriate state. @AdobeXD pic.twitter.com/Dv97WUANPE

— Elaine Chao (@elainecchao) November 20, 2020

ステートの編集は通常のコンポーネントと同様の手順で行います。まず、編集したいステートが選択されていることを確認してから編集することを忘れないようにしましょう。上の動画では追加したステートに×印をカット＆ペーストしています。メインコンポーネントを変更すると、インスタンスにも同時に反映される様子が確認できます。

Tip 4. ステートにインタラクションを設定する

#AdobeXD #ProTip Create interactions between states by selecting the component in Prototype mode, then adding an interaction via the property inspector. States are set in a different section in the destination dropdown than other artboards. @AdobeXD pic.twitter.com/NifBJm4F4I

— Elaine Chao (@elainecchao) November 23, 2020

プロトタイプモードを使い、ステート間のトランジションを設定します。初期設定のステートが選択されていることを確認してから、トリガーにタップ、アクションの種類にトランジションを指定します。移動先に追加したステートを選択すると、ステート間のトランジションの指定になります。

#AdobeXD #ProTip You can create an interaction between any two states in the component; simply select the state you want to animate from, then add an interaction in the property inspector. @AdobeXD pic.twitter.com/LQDww25Htf

— Elaine Chao (@elainecchao) November 24, 2020

追加したステートからも同様の設定を行います。今回は移動先に初期設定のステートを指定します。プレビューウインドウで動きを確認してみましょう。

Tip 5. ホバー時の動きを設定する

#AdobeXD #ProTip A hover state is a special type of shortcut that automatically creates two states that are linked together in a component by a hover interaction. Once you edit the second hover state, the interaction is immediately available. @AdobeXD pic.twitter.com/okWeazwORv

— Elaine Chao (@elainecchao) November 26, 2020

ホバーステートを使うと、ホバー時の動きを簡単に設定できます。上の動画のように、ホバーステートを追加して見た目を編集するだけでプロトタイプが動作します。

#AdobeXD #ProTip Despite the fact there’s a hover shortcut for a new state, it’s not the only way to create a hover interaction. You can manually create them between any two component states by selecting the hover interaction type in the property inspector. @AdobeXD pic.twitter.com/wQLc5H5VxW

— Elaine Chao (@elainecchao) November 27, 2020

手動でホバーのインタラクションを設定することも可能です。上の動画のように、トリガーに「ホバー」を選択すると、任意のステートにホバーの動きを設定できます。

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？

次回をお楽しみに！