Figmaのプロトタイプ機能は、単なる画面遷移だけでなく、スクロール演出や固定UI、簡易アニメーションまで再現できるようになっています。HTML/CSS/JavaScriptで作っていたブラウザイメージに近い見せ方も可能ですが、Web実装と完全に同じ自由度ではありません。この記事では、Figmaプロトタイプで再現できる範囲や、スクロール連動、画面外からの表示演出、レスポンシブ的な配置方法について詳しく解説します。
Figmaプロトタイプで再現できること
最近のFigmaプロトタイプはかなり高機能です。
| 機能 | 再現可否 |
|---|---|
| 画面遷移 | 可能 |
| ホバー演出 | 可能 |
| モーダル表示 | 可能 |
| 固定ヘッダー | 可能 |
| スクロール演出 | 一部可能 |
| パララックス | 限定的 |
| JS的条件分岐 | 不可 |
特に「Smart Animate」を使うことで、かなり滑らかなアニメーション表現が可能です。
画面外からページトップボタンを出す演出は可能？
質問にある「スクロールで画面外からページトップボタンが出現する演出」は、Figmaでもある程度再現できます。
基本的な作り方
- スクロール前フレームを作成
- ボタンを画面外に配置
- スクロール後フレームを作成
- ボタンを表示位置へ移動
- Smart Animateで接続
これにより、下や右からスライドインするような見せ方ができます。
ただし、実際のブラウザスクロール量に応じて自動発火するJavaScript的挙動はFigma単体では難しいです。
スクロール時の固定表示は「Fix position」で対応
ページトップボタンや固定ヘッダーは、「Fix position when scrolling」を使います。
設定方法
- 固定したい要素を選択
- 右パネルの「Fix position when scrolling」をON
- Constraintsで右下固定を設定
これにより、スクロールしても常に右下に表示されます。
例えば「画面右下から10px」のような配置イメージに近づけられます。
レスポンシブ的な動きはどこまで可能？
FigmaにはAuto LayoutとConstraintsがあります。
これを使うことで、ある程度レスポンシブっぽい挙動を再現できます。
よく使う設定
- Right + Bottom固定
- Scale設定
- Fill container
- Hug contents
ただし、HTML/CSSのように「閲覧者のブラウザ幅に応じて完全可変」は限定的です。
そのため、実務では以下のような作り方が多いです。
- PC版フレーム
- タブレット版フレーム
- スマホ版フレーム
つまり、複数デバイスを作り分ける運用です。
HTMLモックとFigmaの違い
HTML/CSS/JavaScriptで作るモックは、実ブラウザ挙動にかなり近づけられます。
一方、Figmaは「デザイン確認・UI検証」に強いツールです。
| 比較 | Figma | HTMLモック |
|---|---|---|
| 制作速度 | 速い | やや遅い |
| 実装再現性 | 中程度 | 高い |
| 共有性 | 非常に高い | 環境依存あり |
| JavaScript表現 | 限定的 | 自由 |
そのため、実装前のプレゼンやUI設計ならFigma、細かい挙動検証ならHTMLモックという使い分けが多いです。
おすすめのFigma機能
スクロール演出やUI確認を行うなら、以下はかなり便利です。
- Smart Animate
- Interactive Components
- Variables
- Auto Layout
- Overlay
特にInteractive Componentsを使うと、ホバーやクリック状態切替もかなり自然になります。
まとめ
Figmaのプロトタイプ機能では、固定ボタンや簡易スクロール演出、画面外からの登場アニメーションなど、多くのUI表現を再現できます。ただし、JavaScriptによる細かなスクロール検知や完全なレスポンシブ挙動は苦手なため、必要に応じてHTMLモックとの使い分けが重要です。ページトップボタンのようなUIは「Fix position when scrolling」と「Smart Animate」を組み合わせることで、かなり実装イメージに近づけることが可能です。
コメント