Figmaのプロトタイプモードで動画ファイルを使ったインタラクションが可能に。操作可能な動画プレーヤーも作れる！

Figmaのプロトタイプモードで動画ファイルを使ったインタラクションが追加出来るようになりました。動画視聴サービスや、プロダクト紹介ページなど、動画を使った様々なデザインの検証に役立ちそうですね。今回のアップデートは主に5点、

• ボタン操作による「動画再生」や「ミュート」などのアクション呼び出し

• 動画の特定の再生位置をトリガーとしたアクション呼び出し

• デザインモードでの動画プレビュー

• 100MBまでのmp4, mov, webmファイルへの対応

• 複数動画の一括挿入

特に最初の2点であるインタラクション関連のアップデートによって、様々なユースケースでの表現が出来るようになりました。Figma Communityに公開されている公式プレイグラウンドでは、今回のアップデートで追加された新しい機能を使ったプロトタイプの例が数多く紹介されています。

こちらの例では、ボタン操作による動画の再生・停止やミュートといった新機能を使って、一般的な動画プレーヤーのプロトタイプを実現しています。

スワイプをトリガーとして動画を再生することで、TikTokやInstagramストーリーのような縦スワイプ操作と動画の再生・停止を紐づけたプロトタイプも作成することができます。

また、UI上のアクションをトリガーとして動画を操作するだけではなく、動画の状態を元にUIを変更することも可能。こちらの例は、動画の終了直前の再生位置をトリガーとして、その他のおすすめ動画をプレーヤー上に表示するプロトタイプです。

公式プレイグラウンドでは、その他にも多くの実例が紹介されています。動画のアップロードは有料プランで提供される機能となるものの、無料プランでもアップロード済みの動画ファイルを使った編集は可能。まずはFigma公式のプレイグラウンドを使って、今回発表された機能を試してみてはいかがでしょうか？

出典: Figma Releases: ▶️ Videos in prototypes just got better