Figmaのプロトタイプ動画機能を使用すると完成デザインがイメージしやすくなります。
この記事では、Figma上での動画の扱い方をいくつか見ていきます。
※ 有償アカウントのみの機能になります。プレビューは制限ありません。
動画を配置
まずは、動画をFigmaにドラッグ＆ドロップして配置します。
読み込める形式は.mp4、.mov、.webmです。
デザイン上では、もちろん再生しないですが、再生プレビューは確認できます。
塗りオブジェクトなので画像同様に、マスクや透過などfigma上で自由度高く編集できます。
それでは 背景に動画を流すデザインを作例に見ていきましょう。
デフォルト設定
プロトタイプ画面で動画を選択するとデフォルト設定は以下のようになっており変更もできます。
- 自動再生
- ループ
-
音声あり
プロトタイプでプレビュー
再生されました。ループ設定にしています。
画像のように扱えるので大きくしたり
色をつけたり
再生/一時停止
デザインに再生・一時停止ボタンを追加し動画を制御できます。
まとめ
動画組み込み実装がある場合、デザイン上で実際のイメージが検証できます。
figmaは日々アップデートされており、他にも様々な動画機能があるのでプロトタイプの動画機能を活用してみてはいかがでしょうか。