Figmaプロトタイプ入門〜アニメーションとインタラクションイメージのつくりかた〜

neccoでは、サイト制作・プロジェクト進行・プレゼンテーションなどのあらゆる場面において、Figmaのプロトタイプ機能を活用しています。

デザインの遷移を繋いでフローや動きを確認することができる機能になりますが、使い方次第ではさまざまな場所で活用できる機能です。
どのようなシーンで活用しているか紹介しつつ、基本的なプロトタイプ機能の使い方やコツについても説明していきます。

Figmaのプロトタイプ機能について

デザインコラボレーションツールFigmaでは、デザインをつくる以外にもプロトタイプという機能があります。プロトタイプ機能では、作成したデザインに画面遷移や動きをつけることができます。

プロトタイプ機能を使いこなすことで制作や提案のクオリティアップに繋げることができます！プロトタイプ機能のメリットや使い方について紹介してきます。

Figmaのプロトタイプ機能を使うメリット

Figmaのプロトタイプ機能を使うメリットは大きく分けて3つあります。
1.画面遷移を確認することで完成系に近い状態で確認できる
2.動きのイメージを作成できる
3.実機で確認できる
1つずつ紹介していきます。

1.画面遷移を確認することで完成系に近い状態で確認できる

デザインの画面遷移を作成することで、実装前に完成系に近い状態でデザインを確認できます。実装前に、不自然な箇所に気付けたり改善がしやすくなります。

2.動きのイメージを作成できる

プロトタイプ機能ではアニメーションをつけることも可能です。例えば、サイトやアプリケーションのデザイン時に、ボタン等のホバーアニメーションをプロトタイプ機能で作成し、エンジニアの方にイメージを共有するまでをFigma上で完結できます。

3.実機で確認できる

つないだプロトタイプのフローは、ブラウザ上やスマートフォンのアプリケーションでも確認できます。実機でデザインを触りながらインタラクションを確認できるので、クライアントや社内の共有にも役立ちます。

neccoのプロトタイプ機能の活用例

neccoでは業務のさまざまなシーンでプロトタイプ機能を活用しています。4つの活用例について紹介していきます。

1.プレゼンテーション

プレゼンテーションの資料作成をFigmaで行い、プロトタイプでつなげてプレゼンテーションを行なっています。動画なども簡単に取り込めるので便利です。

2.画面遷移の確認

サイト作成時やアプリケーション・サービスのデザイン作成後、想定した動きになっているか、遷移に問題がないかプロトタイプ機能で繋いで確認を行うことができます。

実装される前に完成に近い状態でデザインを確認できるのでとても便利です。

3.インタラクションの作成

簡単なインタラクションの作成も可能です。Figma上でまずはインタラクションを作成してエンジニアの方に渡すことが多いです。Figmaで再現できない複雑な動きはAfter Effectsで作成することもあります。

4.実機での確認・共有

ブラウザでプロトタイプを確認することで、実機でのイメージ確認も簡単に行うことができます。また、設定を変えれば任意のデバイスに入れた状態でのプレビューが可能なのでクライアントの方にも、より完成に近い状態で確認していただけます。

Figmaのプロトタイプの基本操作について

プロトタイプ機能を使ったことのない方に向けて、基本操作について紹介します。
今回はスマートフォン用のレシピアプリのログインからアプリのTOP画面に遷移するフローを繋いでいきます。

1.フローの開始点の追加

まずは遷移の一連のながれの開始地点を設定します。

右サイドバー＞[プロトタイプタブ]を選択し、キャンバスで遷移の1番最初のフレームを選択します。右サイドバーに[フローの開始点の追加]ボタンが表示されるのでクリックします。フレーム左上に青い四角いボックスが表示されたら、開始点が追加されています。

フレーム左上の青いボックス、もしくは右サイドバー内のフローの開始点の下の入力エリアをダブルクリックでテキストを編集できます。「プレゼンテーション」「ログインフロー」など分かりやすい名前を設定してみましょう。

2.遷移先の設定

フローの開始点を追加できたら、遷移先を設定していきます。右サイドバー＞[プロトタイプタブ]を選択した状態で、フレームを選択します。フレームの辺の中央に青い丸が表示されるので、そちらをドラッグ＆ドロップで遷移したいフレームにつなげます。こちらで遷移先の設定が完了です。

3.遷移のインタラクション調整

遷移をつなぐとウィンドウが出てきます。こちらでは遷移時のトリガーやアニメーションの調整などができます。特に編集しなくても問題はありません。簡単にこちらのウィンドウで設定できる内容について紹介します。

1.トリガー：クリック、ホバーなどプロトタイプを次に進めるインタラクションの種類を設定できます。

2.アクション：トリガーを行った際の挙動のことを指します。次に進む、前の画面に戻る、オーバレイを開くなどを設定できます。

3.宛先：遷移先のフレームを設定できます。

4.アニメーション設定：別のフレームに移動する際のアニメーションを設定できます。即時・ディゾルブ・スマートアニメートの3種類から選択できます。

5.イージングとスプリングアニメーション：遷移間の加速度と、遷移が完了するまでにかかる時間をミリ秒（ms）で設定できます。1ms~10000ms（10秒）までの間で時間は設定できます。

参照：Figma Learn「インタラクションの作成」

4.プロトタイプのデバイス設定

何も選択していない状態で右サイドバーの[プロトタイプタブ]をクリックすることで、プレビュー時のデバイスもしくは画面サイズを選択できます。今回はiPhone8を選択します。自由にサイズを指定できるカスタムサイズや、プレゼンテーション用の全画面表示なども選択できます。

5.プレビュー

ここまでつないだフローをプレビューで確認します。フローの開始地点のフレームを選択し、ツールバー右上の▷再生ボタンを選択、[新しいタブに表示]をクリックします。新しいタブで、つないだフローを確認できます。「R」を押すと開始地点のフレームに戻ることができます。プレビュー画面の左サイドバーには、他にも設定したフローがあればそちらの名前が表示されます。

ボタンのインタラクションを作成する方法

インタラクションとは、ユーザーがサイト上で行うアクションのこと全般を指します。Figmaでは、任意のフレームに対して次の動作に進ませるトリガー、実際に行うアクション、動き方の種類や秒数を設定することができます。

ボタンをホバーしたときに、色が切り替わるインタラクションを作成してみましょう。

1.ボタンのデザインを用意

まずはボタンのデザインを用意しましょう。通常時と、ホバーした後のデザインを用意します。今回はボタンの背景色とテキストカラー、オブジェクトの角度を変更しています。

2.インタラクションの追加

Figmaの右サイドバーで[プロトタイプタブ]が選択された状態で、デフォルト時のボタンのフレームを選択します。ドラッグ&ドロップでホバー時のボタンに繋げます。

3.マウスがボタンに触れた時の設定

インタラクションの設定パネルが表示されたら、パネル左上をクリックし、[マウスオーバー]に変更します。これで、デフォルト時のボタンのフレームにマウスが乗った状態の時に、ホバー時のボタンのフレームに変更するように設定できました。

パネル右下の時間を300msに設定します。次のフレームに変更完了するのにかかる時間を設定できます。お好みで数値は変えていただいて大丈夫です。

4.マウスがボタンから離れた時の設定

次に、マウスがボタンから離れた時の設定を行います。右サイドバーで[プロトタイプタブ]が選択された状態で、ホバー時のボタンのフレームを選択します。ドラッグ&ドロップでデフォルト時のボタンに繋げます。

インタラクションの設定パネルが表示されたら、パネル左上をクリックし、[マウスリーブ]に変更します。ボタンのフレームからマウスが離れた状態の時に、デフォルト時のボタンのフレームに変更するように設定できました。

パネル右下の時間は先ほどと同じ300msに設定します。こちらもお好みで変えていただいて問題ありません。

5.完成

上記でボタンのインタラクションアニメーションの設定は完成です！ボタンをフレームに追加して、プレビューモードで確認してみましょう。

設定を再度調整したい場合は、[プロトタイプタブ]が選択された状態で、繋いだ青いフローをクリックすることでインタラクションのパネルが表示されます。秒数や動きの種類を調整してみてください。

コンポーネントにしたデザインにインタラクションの設定をしておくと、他の場所にもこちらのボタンを使用した際にプレビュー時にインタラクションが確認できます。

スマートアニメートについて

Figmaのアニメーションの便利な機能、スマートアニメートについて紹介します。こちらの機能は、前後の差分を感知して自動でなめらかにしてくれる機能です。フレーム間で一致するレイヤーがある場合、変化を検知します。

不透明度・拡大縮小等の変形・位置・回転・塗りなどの変化を感知します。

こちらの機能を活用することでより高度なアニメーションを作成することができます。使い方はとても簡単で、インタラクションパネルのトランジションから「スマートアニメート」を選択すれば適用されます。

同じレイヤー名や階層でないと、変化が感知されないことがあるので注意が必要です。

オブジェクトの色と角度を変えた2つのフレームをつなぎ、アニメーションの種類を「スマートアニメート」に設定してみた例が下記になります。

過去にスマートアニメートを活用して作成したファーストビューのアニメーションイメージがこちらになります。

紙芝居のようにデザインフレームを置いていき、秒数やフレームを変えていくことで簡易的なオープニングアニメーションなどもFigmaで作成することができます。

まとめ

プロトタイプ機能を使うことで、より完成に近いデザインを共有したり動きのイメージも作成・提案できるようになります。

複雑な動きを作成するときはAfterEffectsを使用しますが、簡易的なイメージを伝えるのにFigmaのプロトタイプ機能は優れています。ぜひ、使いこなして制作や提案のクオリティアップに繋げてみてください。

関連記事のご紹介✍️

FigmaでLottieアニメーションをつくってみたい方は、『FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説』こちらに作成方法がまとまっています。

Lottieの基本や活用事例、After Effectsでの作成方法は、『ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説』にまとまっています。

ぜひこちらも合わせてご活用ください✨