会員限定 プロトタイプ

• フレーム間の遷移
• ホバーアニメーション

Figmaのプロトタイプ機能を使って、実際の動きに近いデザインをシミュレートすることができます。
ここでは、フレーム間の遷移とボタンのホバーアニメーションの作り方について説明します。

フレーム間の遷移

1. 遷移元と遷移先を作成
   遷移元となるフレームと遷移先となるフレームを作成します。

   

2. 遷移設定を行う
   遷移元となるフレームを選択し、右サイドバーにある「プロトタイプ」タブを開きます。

   

   

   フレームの辺にカーソルを合わせると＋マークが表示されます。
   フレーム内のレイヤーを選択することも可能です。

   

   ＋マークをドラッグし、遷移先のフレームに合わせてドロップします。

   

   遷移設定が完了し、遷移効果の設定ができるようになります。
   どのアクションを行った時に遷移するかなどの設定ができます。
   デフォルトはタップ時になります。
   設定が完了したら、右上の「プレビュー」ボタンをクリックします。
3. 遷移を確認する
   プレビュー画面で設定したアクションで繊維ができるか確認します。

   

   こちらはプロトタイプタブのデバイスをiPhoneに設定しています。

   

   画面をタップすると設定した通り画面遷移ができています。
   ショートカットキー（⌘＋R）で初期状態に戻すこともできます。

ホバーアニメーション

1. ボタンを作成し、コンポーネント化する
   ボタンとなるフレームを作成し、テキストなどを配置します。
   その後、作成したボタンをコンポーネント化し、ツールパネルにある「バリアントを追加」ボタンをクリックします。
   ダイヤの中に＋マークが入っているのが目印です。

   

2. ホバー状態を作成する
   メインコンポーネントと同じスタイルのボタンが複製されます。
   こちらががホバー状態のボタンとなります。
   ホバー状態を選択し、ボタンの色、影、テキストの色などを変更します。
   これが、ボタンがホバーしたときに表示されるデザインとなります。

   

   プロパティパネルの「現在のバリアント」からバリアントの名前の変更もできます。
   複製したバリアントがどの状態のデザインなのか把握するの使用します。

   

3. アニメーションを設定
   ホバー状態を選択し、右サイドバーにある「プロトタイプ」タブを開き、デフォルトのボタンのへんにカーソルを合わせると表示される、＋マークからホバー状態のボタンに向けドラック&ドロップをします。

   

   プロトタイプタブを開きます。

   

   ホバー状態のボタンに向けドラック&ドロップをします。

   

   アニメーションを変更するため「クリック時」のプルダウンをクリックします。

   

   メニューからマウスオーバー（ホバー）を選択します。

   

   次にアニメーション設定を「即時」のプルダウンをクリックし、「ディゾルブ」に変更します。
   ディゾルブは状態がフェードイン・フェードアウトするような効果、ホバーやクリック時のスムーズな変化に適しています。

   

   300msは0.3秒で状態が変更する設定になります。
   アニメーションの長さは重要で短すぎると気づかれにくく、長すぎるとユーザー体験が悪化します。
   ホバー時: 0.2秒から0.3秒、クリック時: 0.3秒から0.5秒が適切と言われています。
4. プレビューで確認する
   設定が完了したら、作成したデザインをフレーム内に配置し、右上の「プレビュー」ボタンをクリックして、実際にホバーアニメーションを確認することができます。

   

   今回は「プレビュー」で確認します。

   

   プレビューがキャンバスに表示されます。
   プレビュー内のボタンにカーソルを合わせると設定したアニメーションが確認することができます。

以上、「プロトタイプ」について説明でした。