動画チュートリアル：FigmaのHTMLバナーにリッチテキストのポップアップオーバーレイを追加する

この動画では、Bannerifyプラグインを使って、FigmaのHTMLバナーにリッチテキストのポップアップオーバーレイを追加する方法を紹介します。

バナーのタイムラインで特定のレイヤーをクリックすると開く、スクロールできる（閉じることもできる）リッチテキストのポップアップオーバーレイをバナーに含めたい場合は、各バナーでトリガーにしたいレイヤーを選択してから、プラグイン下部の一括操作ウィンドウ（タイムラインで複数のレイヤーにチェックを入れると表示されます）にあるGenerate Popup Overlay Disclaimersセクションで、アニメーションのオプションを選びます。

ポップアップのアニメーション設定が決まったら、Create Popup Linksボタンをクリックします。Figmaのページに（テキストレイヤーと閉じるボタンを含む）「Popup」コンポーネントが自動で作成され、選択した各レイヤーが、Figma標準のプロトタイプリンク機能を使って、その新しいPopupコンポーネントを指すトリガーとして自動でリンクされます。

テキストレイヤーの内容を変更したり、フォントサイズを調整したり、ポップアップの背景、閉じるアイコン、テキストレイヤーの単色の塗りを変更したりするのは自由です。

HTMLバナーをエクスポートすると、プラグインがこれらのFigmaのプロトタイプリンクと、リンク先のPopupコンポーネントを自動で探し、最終的にエクスポートされるバナーセットに、クリックできるトリガーとポップアップオーバーレイのコードを生成します。

スクロールバーのスタイルをカスタマイズする

省略表示されたスクロールできるテキストレイヤーや、ポップアップオーバーレイのテキストのスクロールバーのスタイルをカスタマイズしたい場合は、HTMLエクスポート設定でInject Custom Codeを有効にしてから、次のコードをCustom CSS欄に貼り付けます。

:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

上部の値を変更すると、スクロールバーの色、トラックの色、幅、高さ、角の丸みを更新できます。ブラウザやモバイルデバイスによっては、引き続きシステム標準のスタイルでスクロールバーが表示されることがありますが、カスタムのスクロールバースタイルを許可している環境では、このCSSが適用されます。

このコンポーネントは、（注意書き用の）テキストレイヤー1つと閉じるボタンだけの、ごくシンプルな構成になっています。テキストの内容、フォントスタイル、色は自由にカスタマイズできますが、それ以外のカスタマイズやレイヤーの追加を行うと、エクスポートしたHTMLが壊れる可能性があります。