【Figma】ホバー時にボタンが跳ねる?解決の備忘録

Figmaのホバー機能(マウスオーバー)でボタンが不自然に動いてしまう現象の原因と、「ディゾルブ」を使った一時的な解決策についての備忘録です。


紙グラフィックからwebデザインを勉強中の人間です。

figmaがだいぶん楽しくなってきました。今やチラシの構成案までならfigmaで作りたいな、と思うまでになっております。

そんな私は最近、figmaのマウスオーバー時のホバー機能にはまっております。
大昔、趣味でサイトを作っていたころ、ポインタの形やスクロールバーの色を変えたりと細かいところまで楽しんでいたのを思い出します。

しかし、このホバー挙動、うまく反映できる時と、そうじゃない時があります。
figmaさんは命令されたようにしか動いていないのだから、きっと私が何か余計なことをやらかしているのでしょう。
しかし、そのやらかしを突き止めるに至っていません。

Figmaのホバー機能でボタンが別の場所へ飛んでしまう現象

ところで、ホバー機能がうまくいかない点は何かというと……。

↓このボタンにマウスオンしたら…

↓こう変化してほしい。(その場で)

マウスオーバー時の表示は指定フレームへ切り替えて欲しい。場所の移動は求めていない。

しかし、要素は一瞬左上へ跳ねて別の場所へ戻ってしまいます。

↓何故かチラッと斜め上に発現してから戻ってくる。目がチラチラします。

AIに聞きながらいろいろ試しては見たのですが、結局解決には至らず。

AIやネットの知見を頼りに解決策を探る

インターネットで聞いたらば、ボタン程度の簡単なものならば「アニメーションではなくディゾルブにしたらいい。」との回答を貰いました。

↓この「スマートアニメート」のプルダウンを……

↓「ディゾルブ」に変更しました。

試してみたところ、出来ました! ディゾルブ万歳!

ディゾルブで一時解決!しかし今後の課題も

複雑なアニメーション表現に向けての今後の勉強予定

しかしこれでは大胆な動きのあるアニメーションがfigmaで表現できないぞ。
これはこれで解決しなくてはなりません。
勉強して解決できたら、また忘備録代わりにここに書きに来ます。