ツールチップの作り方（Figma）

今回の記事ではFigma上でのツールチップの作り方について記載します。

ツールチップの作成

まずツールチップを表示させる対象のパーツを作成して配置します。

別フレームでツールチップを作成します。

トリガー箇所からツールチップのフレームをオーバレイとしてプロトタイプで設定します。
この際、オーバーレイの表示位置は『手動』を設定してドラッグで調整します。
また、今回は『？』アイコンにホバーした際に表示させたいので、プロトタイプには『マウスオーバー』を設定します。

あとはプレビューを確認し、問題なく動けば完成です。

まとめ

以上、Figma上でのツールチップの作り方でした。