figma-button-with-fill-animation-prototype
公開日: 2022.03.11  | 更新日: 2022.03.11

Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、ボタンをマウスオーバーやクリックした際に塗りが円形に広がるようなアニメーションを適用したサンプルファイルの紹介です。

この記事のターゲット

  • Figmaの中級者〜上級者

  • Figmaでプロトタイプ機能を使ったアニメーション表現について知りたい方

  • Figmaのプロトタイプが適用されたサンプルファイルが欲しい方


円形に広がるアニメーションのボタンの概要

bwfa1

ボタンをマウスオーバーすると、円が広がっていくようなアニメーションが表示され、クリックするとさらに色が濃くなるようなアニメーションがプロトタイプで設定されています。

細かい作り方は割愛しますが、どのように作られているか気になる方は、無料でサンプルファイルをダウンロードできますので、実物を見て試していただければと思います。

CleanShot 2022-02-26 at 18.40.37

円形が広がるアニメーションのボタンのサンプルファイル

CleanShot 2022-02-26 at 18.45.07

この記事で紹介したボタンのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。

実際に触ったりできるサンプルファイルを公開しています。応用してオリジナルのボタンの作成の参考にしてください。

円形が広がるアニメーションのボタン | Figma Community 私用・商用問わずご自由にご利用ください。


この記事を読んだ方におすすめの記事

Figmaでシンプルなボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-button

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-form

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-table

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告