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

by akihiro kamijo

Posted on 12-10-2020


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

— 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

— 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

— 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

— Elaine Chao (@elainecchao) November 19, 2020


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

— 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

— 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

— 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

— 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

— Elaine Chao (@elainecchao) November 27, 2020




Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン