公開日: 2022.09.03 　|　更新日: 2022.09.03

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

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

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

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

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

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

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

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

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

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