![figma-table-cell-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/51DedOPKQyEZ6nBeUY0irO/d8dc50a6b628bff64df3c5c391450bb6/figma-table-cell-animation-prototype.png?w=1200&h=630&q=50&fm=png)
公開日: 2022.09.03 | 更新日: 2022.09.03
マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)
今回はFigmaのプロトタイプ(Prototype)機能を利用して、テーブルのセルをマウスオーバーやクリックした際に枠線の色が変わったり背景色が変わるアニメーションを適用したサンプルファイルの紹介です。
この記事のターゲット
Figmaの中級者〜上級者
Figmaでプロトタイプ機能を使ったアニメーション表現について知りたい方
Figmaのプロトタイプが適用されたサンプルファイルが欲しい方
マウスオーバー・クリックすると罫線スタイルが変わるテーブルの概要
テーブルのセルをマウスオーバーやクリックした際に枠線の色が変わったり背景色が変わるアニメーションがプロトタイプで設定されています。
細かい作り方は割愛しますが、どのように作られているか気になる方は、無料でサンプルファイルをダウンロードできますので、実物を見て試していただければと思います。
![table-animation2](https://images.ctfassets.net/ubv4j9m3121x/yMidvEt3h1kjs4T4cLoSV/49fc216e17182f0875e37b75abcb018c/CleanShot_2022-08-28_at_17.15.44.png?w=1496&h=828&q=50&fm=png)
マウスオーバー・クリックすると罫線スタイルが変わるテーブルのサンプルファイル
![table-sample](https://images.ctfassets.net/ubv4j9m3121x/6xTXFkPjQlxnijM9CbaczE/008b84191fa3ce59eac9576a6b5e3a79/CleanShot_2022-08-28_at_17.26.21.png?w=1150&h=842&q=50&fm=png)
この記事で紹介したテーブルのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。
マウスオーバー・クリックすると罫線スタイルが変わるテーブル | Figma Community
私用・商用問わずご自由にご利用ください。