![figma-button-with-fill-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5bM3Xobkx0BkEsS5RrXTVp/5af1f850fd1208ee316d635e8321b7fc/figma-button-with-fill-animation-prototype.png?w=1200&h=630&q=50&fm=png)
公開日: 2022.03.11 | 更新日: 2022.03.11
Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)
今回はFigmaのプロトタイプ(Prototype)機能を利用して、ボタンをマウスオーバーやクリックした際に塗りが円形に広がるようなアニメーションを適用したサンプルファイルの紹介です。
この記事のターゲット
Figmaの中級者〜上級者
Figmaでプロトタイプ機能を使ったアニメーション表現について知りたい方
Figmaのプロトタイプが適用されたサンプルファイルが欲しい方
円形に広がるアニメーションのボタンの概要
ボタンをマウスオーバーすると、円が広がっていくようなアニメーションが表示され、クリックするとさらに色が濃くなるようなアニメーションがプロトタイプで設定されています。
細かい作り方は割愛しますが、どのように作られているか気になる方は、無料でサンプルファイルをダウンロードできますので、実物を見て試していただければと思います。
![CleanShot 2022-02-26 at 18.40.37](https://images.ctfassets.net/ubv4j9m3121x/5JBgLOHgq76aei3MLjy082/9ddfa20016c032c7e2e6af7489bbb670/CleanShot_2022-02-26_at_18.40.37.png?w=1751&h=1116&q=50&fm=png)
円形が広がるアニメーションのボタンのサンプルファイル
![CleanShot 2022-02-26 at 18.45.07](https://images.ctfassets.net/ubv4j9m3121x/4QP2sH4S1idnN0NcGQJwmU/c5fc60d68ad2c3c9667c8aa3bf93eb39/CleanShot_2022-02-26_at_18.45.07.png?w=886&h=759&q=50&fm=png)
この記事で紹介したボタンのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。
実際に触ったりできるサンプルファイルを公開しています。応用してオリジナルのボタンの作成の参考にしてください。
円形が広がるアニメーションのボタン | Figma Community 私用・商用問わずご自由にご利用ください。