figma-table-cell-animation-prototype
公開日: 2022.09.03  | 更新日: 2022.09.03

マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、テーブルのセルをマウスオーバーやクリックした際に枠線の色が変わったり背景色が変わるアニメーションを適用したサンプルファイルの紹介です。

この記事のターゲット

  • Figmaの中級者〜上級者

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

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


マウスオーバー・クリックすると罫線スタイルが変わるテーブルの概要

table-animation1

テーブルのセルをマウスオーバーやクリックした際に枠線の色が変わったり背景色が変わるアニメーションがプロトタイプで設定されています。

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

table-animation2

マウスオーバー・クリックすると罫線スタイルが変わるテーブルのサンプルファイル

table-sample

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

マウスオーバー・クリックすると罫線スタイルが変わるテーブル | Figma Community

私用・商用問わずご自由にご利用ください。


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

Figmaで枠線(Stroke)を部分的に適用する方法

今回は、Figmaで四角形のオブジェクトの4辺の枠線(Stroke)を1辺だけ、2辺だけといったように部分的に適用する方法を紹介します。テーブルやリストといった罫線を表現する際に左右のどちらかだけ、または上下につけるといった部分的な表現が可能になります。 ... 続きを読む

figma-partially-apply-border

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

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

figma-how-to-create-table

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

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

figma-button-with-fill-animation-prototype

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

うえんつ

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