Figma：押すのが楽しくなる？〜アニメーションを使ったボタンの作り方〜

目次

0_ はじめに

1_ 押すと「ぷにゅっ」とつぶれるボタン

2_ 泡が「ポンッ」と弾けるボタン

3_ 押すと「ポンッ」とはずむボタン

4_ まとめ

制作

0_ はじめに

Webサイトやアプリの中で、ユーザーが一番“触れる”UI。
だからこそ、押した瞬間の気持ちよさで印象がガラッと変わります。

今回は、Figmaで作れる私的に面白いと思った『押すのが楽しくなるボタン』やその作り方をいくつか軽く紹介していきたいと思います。
今回のボタンはコンポーネントを使った作り方なので、コンポーネントの記事もぜひ合わせて読んでみてください。

コンポーネントについての記事はこちらから→https://blog2.shizude.net/figma-september-2-2025/

1_ 押すと「ぷにゅっ」とつぶれるボタン

押すと「ぷにゅっ」とつぶれ、もう一度押すとバウンスしながら戻るボタンです。
質感があって押すのが楽しいなと感じました。

作り方はまずはデフォルトとなるボタンを１つ作り、コンポーネントにします。
右のメニューの「バリアントの追加」からボタンを複製します。
複製したボタンの形を変え、デフォルトの状態とつぶれたときの状態のものを用意します。2つをお互いに繋げ、ボタンを設定します。
ボタンの設定は右の画像の通りで、アニメーションを「スマートアニメート」にし、曲線を「バウンス」にします。戻る時も同じで設定です。

2_ 泡が「ポンッ」と弾けるボタン

ボタンの上にカーソルを重ねたら泡が出てきて、押したら弾けるアニメーションがあるボタンです。
押した瞬間に「ポンッ」と泡が弾ける感覚が面白くて、可愛いアニメーションだと思いました。

作り方は、まず1つ目のデフォルトの状態ではボタンの下に泡となる丸を下に隠したもの、2つ目ではボタンの周りに先ほど隠した泡を散らせたもの、3つ目は泡を少し大きくして、不透明度は0にしたものを用意します。
（2つ目から作ってコンポーネントにしてから、バリアントを追加して残りの2つを作るやり方のほうが楽だと思います。）

あとはボタンを動きの順に繋げていくだけで完成です。
1つ目→2つ目はマウスオーバーに、2つ目→3つ目はタップ時にして、あとはどちらもアニメーションをスマートアニメーションにすればこの動きができます。

ループさせる場合は4つ目を用意し、透明にした泡をボタンの下に全てしまっておいたものを用意し、ホバーしたときに泡が最初の状態へ戻るようにしておくと自然に最初の状態に戻すことができます。

3_ 押すと「ポンッ」と弾むボタン

次は指を離した瞬間に「ポンッ」とはずむボタンです。
リアルに近い感じで、押した感があって面白いと思いました。

ボタンは3つ作り、影となる部分を押してる間のボタンは狭くして沈んでいるように、押したあとのボタンは最初よりも浮いている状態にしました。
この3つを繋げたらボタンの完成です。
1つ目→2つ目は「押下中」にして、2つ目→3つ目は「タップ時」にします。

こうすることで、長押ししている間はボタンが沈んだままに、指を離したらボタンが反発してくるような感じになります。

4_ まとめ

今回は３つ私が面白いなと思ったボタンを紹介してみました。

ボタンを押す動作って、ほんの一瞬の体験だけど、
その“気持ちよさ”がサイト全体の印象を変えることもあります。

ぜひFigmaでいろんなボタンを実験して、
自分だけの“押し心地”を見つけてみてください。