プロトタイプでの動画の使用 – Figma Learn - ヘルプセンター

Figmaのリデザイン版であるUI3を使用している場合、この記事の一部が製品に表示される内容と一致しない可能性があります。アップデートを行うまで、今しばらくお待ちいただきますようお願いいたします。Figmaの新デザインの詳細はこちら→

はじめに

この機能を使用できるユーザー

有償チームのメンバーなら誰でもビデオをファイルに追加できます。

編集可アクセス権があれば、誰でもファイルのビデオを編集できます。

初めてプロトタイプを作成する場合は、プロトタイプ作成のガイド →を確認してください

動画をプロトタイプに追加して、動画の再生またはプレビューどおりの操作をサイトまたはアプリで行ってください。

プロトタイプの動画:

注: 動画は、有料のエデュケーション、プロフェッショナル、ビジネスチームのファイルにのみ追加できます。無料のスターターチームのコラボレーターは、ファイル内の既存の動画を編集できますが、動画をアップロードすることはできません。

動画をデザインファイルに追加した後、動画の基本的な品質を編集または調整できます。その後、インタラクションを動画に追加して、プロトタイプの作成を始めることができます。

動画をファイルに追加

Figmaには、動画の特定のレイヤータイプはなく、動画は塗りの1つです。つまり、動画は塗りとして、どんなベクターやシェイプにも追加できます。

塗りモーダルが開いた状態で四角形が選択されている。

動画をデザインファイルに追加するには、次の方法があります。

メモ: プロトタイプにアニメーションGIFを追加することもできます。GIFは、デザインやプロトタイプをプレゼンテーションビューで表示するときのみ再生されます。アニメーションGIFをプロトタイプに追加 →

動画をFigmaのキャンバスに直接追加すると、元のファイルのディメンションでキャンバス上にオブジェクトが作成されます。既存のオブジェクトに動画を塗りとして追加すると、元のオブジェクトの名前とディメンションが使用されます。

動画の塗りの表示や更新は、右スライドバーの[塗り]セクションで行います。[塗り]セクションから、動画の塗りの再生やプレビュー表示、特定のタイムスタンプへジャンプ、動画のスクラブ再生が可能です。

塗りモーダルが開き、動画がアップロードされ、動画のプレビューが表示されている。

また、左スライドバーの[レイヤー]パネルで、動画の塗りを含むレイヤーを識別できます。動画の塗りを含むオブジェクトがレイヤーパネルにアイコンで示されます。

ファイルに動画を追加した後、動画に次の編集を行うことができます。

動画をフレームに追加したら、右サイドバーの[プロトタイプ]に切り替えます。ここで、動画を含むフレーム間のインタラクションを作成できます。

プロトタイプタブが選択されており、動画セクションで、自動再生機能にチェックが入っている。

動画を選択すると、[プロトタイプ]タブに[動画]セクションが表示されます。このセクションでは、プロトタイプ内でその動画のフレームに移動したときの動画の動作を設定できます。

プロトタイプ作成用コネクションの作成時は、インタラクション開始のきっかけを決定するトリガーと、トリガーされたイベントからの応答を定義するアクションを利用できます。

動画のインタラクションには、次のトリガーを利用できます。

動画のインタラクションには、次のアクションを利用できます。

動画を再生/一時停止 - 動画を再生、動画を一時停止、再生/一時停止を切り替えるのいずれかを選択します。
動画をミュート/ミュート解除 - 動画をミュート、動画をミュート解除、ミュート/ミュート解除を切り替えるのいずれかを選択します。
特定の時間に設定 - 動画のジャンプ先のタイムスタンプを設定します。
時間の前/後にジャンプ - 前にジャンプまたは後にジャンプを選択した後、動画を早送りまたは巻き戻しする秒数を設定します。