インタラクティブボタンのデザイン

このプロジェクトでは、インタラクティブボタンをデザインします。このボタンにはデフォルト(default)、カーソルを合わせたとき(hover)、押したとき(pressed)の3つの状態があり、プロトタイピングを使用してアニメーション化します。

このボタンを構築するには次の手順に従います。

1. メインボタンコンポーネントを作成します。
2. ボタンバリアントを作成します。
3. プロトタイピングのインタラクションを追加して、ボタンバリアントを接続します。

完了すると、ボタンは次のような見た目と動作になります。

メインボタンコンポーネントの作成

最初にボタンバリアントの作成に使用するメインコンポーネントを作成する必要があります。

1. ツールバーで[テキスト]ツールを選択し、キャンバスをクリックしてSaveと入力します。
2. テキストレイヤーを選択し、右側のサイドバーのテキストセクションでフォントサイズを16に変更します。このチュートリアルではデフォルトのInterフォントを使用しますが、他のフォントも自由に選択できます。
3. テキストレイヤーを選択して、キーボードショートカットShift Aでオートレイアウトのフレームにします。
4. 右側のサイドバーで、[垂直方法のサイズ調整]と[水平方向のサイズ調整]の設定を両方とも[内包]に設定するようにしてください。
5. 次の調整を行って、フレームを整えます。
   • [線]セクションのプラスをクリックして、2の太さの内側線を追加します
   • 塗りセクションのプラスをクリックして、塗りを追加します
   • 角の半径を8に変更します
   • オブジェクト間の水平方向の間隔を8に変更します
   • 水平方向のパディングを32に変更します
   • 垂直方向のパディングを12に変更します

先に進む前に、ボタンが次のようになっていることを確認してください。

次に、ブックマークアイコンを追加します。自分のアイコンを作成することも、Figmaコミュニティにある多くのアイコンプラグインの1つを使用することもできます。このチュートリアルでは、Phosphor Iconsプラグインを使用して、2つのブックマークアイコンを挿入します。

1. ツールバーの[アクション]をクリックします。
2. [プラグインとウィジェット]タブをクリックします。
3. 検索フィールドに「Phosphor」と入力します。
4. Phosphor Iconsを選択してプラグインを開きます。
5. Phosphor Iconsプラグインで、検索フィールドに「Bookmark」と入力します。
6. 「BookmarkSimple」アイコンの通常バージョンと塗りバージョンを使用します。プラグインの絞り込みオプションを使用して両バージョンを探します。
7. アイコンをクリックしてキャンバスにドラッグします。

次の手順に従って、アイコンのサイズがボタンに合うようにしましょう。

1. 2つのアイコンフレームを選択します。
2. 右側のサイドバーで、 [縦横比を固定]を有効にし、フレーム幅を24に変更するようにします。
3. 塗りアイコンはとりあえず脇に置いておきます。通常アイコンをボタンラベルの左にあるボタンフレームにドラッグします。これはオートレイアウトのフレームなので、アイコンが収まるように自動的に調整されます。

ボタンフレームを選択して、右側のサイドバーの[コンポーネントを作成]をクリックします。これが他のボタンバリアントを作成するメインコンポーネントになります。フレーム名をダブルクリックしてbutton/default/unsavedに名前を変更します。

先に進む前に、ボタンが次のようになっていることを確認してください。

ボタンバリアントの作成

メインコンポーネントができたので、これを使ってその他のボタンバリアントをコンポーネントセットに追加しましす。各バリアントが2つのバリアントプロパティを持つことになります。

unsavedバリアントの構成

まず、unsavedバリアントを構成します。

次の手順に従ってバリアントを追加します。

1. 作成したばかりのコンポーネントを選択します。
2. 右側のサイドバーの [バリアントを追加]をクリックします。
3. 新しいバリアントの下の紫のプラスをクリックして、もう1つバリアントを追加します。

これらのボタンバリアントを構成して、default、hover、pressedの各状態にする必要があります。

コンポーネントセットの上の方にある元のバリアントを選択します。右側のサイドバーの[現在のバリアント]セクションに、このバリアントに値がdefaultのプロパティ1と値がunsavedのプロパティ2というプロパティがあることが表示されます。プロパティ値の名前を内容が分かりやすい名前に変えましょう。

1. プロパティ1をクリックして名前をstateに変更します。プロパティ2も同様に名前をstatusに変更します。これで、コンポーネントセットのすべてのバリアントがstateとstatusと呼ばれるプロパティを持つようになりました。
2. 真ん中のバリアントを選択します。stateプロパティの横で、プロパティ値フィールドにhoverと入力して新しい値を追加します。[塗り]セクションを使用して、バリアントの塗りを#E3E4EBに変更します。
3. 下のバリアントに、このプロセスを繰り返します。stateプロパティの横で、プロパティ値フィールドにpressedと入力し、塗りの色を#A8A9B2に変更します。

先に進む前に、コンポーネントが次のようになっていることを確認してください。

savedバリアントの構成

素晴らしいコンポーネントセットができました。今度は、savedバリアントを追加して、各状態を作成します。

1. 紫のプラスをクリックして、もう1つバリアントを追加します。
2. 新しいバリアントを選択したまま、テキストレイヤーをダブルクリックしてSavedと入力します。
3. キャンバスに追加してあった、塗りのBookmarkSimpleアイコンを選択してコピーします。
4. 作成したばかりのバリアントにある塗りのないアイコンのバージョンを選択し、右クリックして[貼り付けて置換]を選択します。

5. 上にあるバリアント選択します。stateプロパティはそのままにして、savedと呼ばれる新しいstatusプロパティ値を追加します。
6. 新しいsavedバリアントを選択したまま紫のプラスをクリックして、さらにバリアントを2つ追加します。
7. 真ん中のバリアントを選択して、stateプロパティの値をhoverに、塗りを#E3E4EBに変更します。
8. 下のバリアントを選択して、stateプロパティの値をpressedに、塗りの色を#A8A9B2に変更します。

完了すると、コンポーネントセットは次のようになるはずです。

ボタンへのプロトタイピングコネクションの追加

次はボタンをインタラクティブにするために、プロトタイピングコネクションを追加します。プロトタイプ作成の経験が少ない場合は、プロトタイプ作成の包括的なガイドの用語集をご覧になり、このセクションで使用される用語を学習してください。

ホバートリガーの追加

1. 右側のサイドバーの[プロトタイプ作成]をクリックします。
2. default, unsavedバリアントを選択し、青のプラスをクリックしてhover, unsavedバリアントにドラッグします。
3. 次のインタラクション設定を適用します。
   1. トリガーをマウスオーバーに変更します
   2. アクションを次に変更に設定します
   3. アニメーションをスマートアニメートに設定します
   4. トランジションをイーズイン/イーズアウトに変更します
   5. 所要時間フィールドに150 msと入力します。
4. default, savedバリアントとhover, savedバリアントの間に同一プロトタイプコネクションを適用します。

最初の2つのコネクションは次のようになるはずです。

マウスダウントリガーの追加

1. default, unsavedバリアントを選択し、青のプラスをクリックして、pressed, unsavedバリアントにドラッグします。
2. その他のコネクション設定はそのままにして、トリガーを[マウスダウン]に変更します
3. hover, savedバリアントとpressed, savedバリアントの間に同一のプロトタイプコネクションを適用します。

コネクションは次のようになるはずです。

マウスリーブトリガーの追加

1. pressed, unsavedバリアントを選択し、青のプラスをクリックして、default, unsavedバリアントにドラッグします。
2. その他のコネクション設定はそのままにして、トリガーを[マウスリーブ]に変更します
3. pressed, savedバリアントとdefault, savedバリアントの間に同一のプロトタイプコネクションを適用します。

コネクションは次のようになるはずです。

マウスアップトリガーの追加

押すと、unsavedボタンがsavedボタンに、savedボタンがunsavedボタンになるように、最後の2つのコネクションを追加する必要があります。

1. unsaved, pressedバリアントを選択し、青のプラスをクリックして、default, savedバリアントにドラッグします。
2. その他のコネクション設定はそのままにして、トリガーを[マウスアップ]に変更します
3. pressed, savedバリアントとdefault, unsavedバリアントの間に同一のプロトタイプコネクションを適用します。

最後のコネクションは次のようになるはずです。

ボタンの再生

それでは、ボタンを動作させてみましょう。

1. ツールバーで[フレーム]ツールを選択するか、Fを押してキャンバスにフレームを追加します。
2. [アセット]タブから、ボタンのインスタンスをフレームにドラッグします。
3. 新しいフレームを選択したまま、ツールバーの[プロトタイプビュー]ドロップダウンをクリックし、[プレビュー]を選択します。
4. カーソルを合わせて、ボタンを操作します。

次のステップ

お疲れさまでした。コンポーネントセットとプロトタイプ作成を使用して、インタラクティブなボタンがデザインできました。もう1つ課題をお探しでしたら、アイコンだけのボタンが含まれたコンポーネントセットを作成するのはいかがでしょうか。デザインしたものがあって、それがすごく満足いくものなら、私たちにも是非見せてください。X (旧Twitter)の@Figmaにメンションするか、Figmaコミュニティに公開してください。