Figmaでサイトの「動き」を見せることが提案力につながる理由

Webデザインの現場ではさまざまなツールがありますが、その中でもFigmaを使う人は多いと思います。とはいえ、Figmaをまだ十分に使いこなせず、せっかく作ったデザインを静止画としてエクスポートし、クライアントに見せているケースも多いのではないでしょうか。

しかし静止画だけでは、実際の使用感や画面サイズでの文字の見え方をイメージしにくく、クライアントから「完成イメージが違う」と思われてしまうことも少なくありません。その結果、修正依頼が増えてしまうこともあります。

そこで役立つのが、Figmaで動きを見せる工夫です。スマートアニメーションやコンポーネントを活用すれば、実際のブラウザ幅に近い見え方や、サイトらしいインタラクションを再現できます。これによってクライアントの理解がぐっと深まり、提案の説得力も高まります。

今回は、私自身の記録用も兼ねて、ボタンのマウスホバーを題材に「Figmaで動きをつけて見せる方法」と「それが提案時にどんなメリットをもたらすか」を紹介していきたいと思います。

Figmaでボタンに動きをつけるステップ解説

ここでは実際に、ボタンに動きを加える方法をステップで解説します。

1.UIの準備

まずはボタンを作成します。

2.コンポーネント化

先ほど作成したボタンをグループ化して選択をします。
画面右側のサイドバーの上部にあるコンポーネントを作成をクリックします。

コンポーネント化したら画面右側のサイドバー上部のバリアントを追加（◇の中に＋のアイコン）をクリックします。
そうするとボタンが複製されます。

複製したデザインを変更する

ボタンにマウスホバーした際のデザインに変更をします。
複製したボタンの名前をホバーなどにしておくと後々アニメーション設定などを行うときにわかりやすくなります。

3.スマートアニメーション設定

画面右側のサイドバーをデザインからプロトタイプに変更します。
そうするとボタンを選択した際に上下左右にプラスのアイコンが追加されます。
その＋アイコンを変更したいボタンへドラッグアンドドロップするとインタラクションの設定を行うことができます。

まずトリガーを設定します。今回はマウスホバーした際に動くようにしたいため、マウスオーバーを選択します。
次にアクションです。デフォルトのボタンからホバーデザインのようにデザインを変更したいため、次に変更を選択、移動先のプロパティをマウスホバーのデザインにします。

アニメーションや曲線、所要時間などは自分の好みに設定をしてください。

アセットから作成したボタンをドラッグ＆ドロップ

画面左側のアセットにサイドバーを変更すると先ほど作成したボタンがあると思います。
それをボタンを配置したい位置にドラッグ＆ドロップしたら作業完了です。

4.プレビュー確認

右上のプレゼンテーションボタンからプレビューを起動。実際のブラウザ幅に近い状態で動きを再現し、クライアントにも共有できます。