プロトタイプでの動画の使用

はじめに

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

教育、プロフェッショナル、組織、エンタープライズのチームのファイルをサポートします。

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

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

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

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

プロトタイプの動画:

• .mp4、.mov、.webm形式に対応
• 最大サイズは100MB
• シェイプは塗りであり、塗りとして動作します
• Figmaモバイルアプリでは現在サポートされていません。

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

動画をファイルに追加

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

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

• A コンピューターからキャンバスに動画ファイルをドラッグアンドドロップします。

• B 塗りのカラーピッカーの動画インポーターを使用します。塗りのアップロード方法に関する詳細情報 →

• C 画像/動画の配置ツールを使って、複数の動画をまとめて追加します。画像/動画の配置ツールの詳細情報→

• C 現在のファイルの他のレイヤー、または他のファイルからビデオをコピーします。

• D クリップボードからキャンバスにビデオをペーストします。

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

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

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

ビデオを編集

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

• 動画のレイヤーの拡大縮小、回転、ディメンションの調整
• レイヤーに適用された動画のクロップ、位置変更
• 塗りモード、回転、ブレンドモードなどの動画オプションの調整
• 動画の一部だけを表示するためのマスクの適用

動画を使ったプロトタイプ

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

プロトタイプ作成の詳細情報 →

動画のプロパティ

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

• 動画を自動再生のボックスにチェックを入れます
• 動画を繰り返し再生するときは、繰り返し再生アイコンをクリックします
• 動画のデフォルトの音声設定をオンまたはオフにするには、音声アイコンをクリックします

動画のインタラクション

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

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

• タイムスタンプ到達時 - 動画が特定のタイムスタンプに到達したときにトリガーするアクションを設定します。
• 動画終了時 - 動画の再生が完了したときにトリガーするアクションを設定します。

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

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

同じ動画を使用する2つのフレーム間のインタラクションを作成するときは、[インタラクションの詳細]パネルに[動画の状態をリセット]トグルが表示されます。このトグルがオンの場合、動画はフレーム間で最初から再開されます。動画状態の管理についての詳細情報 →

同じフレーム内の動画のインタラクション

同じフレーム内に作成されているトリガーを利用して、動画を操作したり、動画を使ったプロトタイプを作成したりできます。これは、インタラクティブな動画再生機能を作成するときに役に立ちます。

1. 開始オブジェクトから動画ファイルへのコネクションを作成します。
2. 目的の開始アクション(たとえばクリック時)を設定します。
3. ビデオに目的のアクション(たとえば動画のミュート/ミュート解除)を設定します .

動画とスマートアニメート

フレーム間を移動するときにスマートアニメートを使用して、動画の進行状態を保存することができます。つまり、フレームが再生を開始するところでプロトタイプを作成してから動画上でクリックすると、より大きなビューの新しいフレームに移動できます。

1. 動画名を同じにして、2つのフレームの間でコネクションを作成します。必ずビデオレイヤー名も一致するようにしてください。
2. アニメーション設定をスマートアニメートに設定します。
3. [インタラクションの詳細]パネルの[動画の状態をリセット]のチェックを外します。

動画およびインタラクティブコンポーネント

インタラクティブコンポーネントを使用して、ホーバー時のプレビュー再生などの、単一フレーム内での動画インタラクションのプロトタイプを作成します。

1. デフォルト状態とホバー状態のためにバリアント付きのコンポーネントを作成します。
2. デフォルト状態では自動再生をオフに、ホバー状態では自動再生をオンに設定してください。
3. デフォルトのバリアントからコネクションを作成してホバーバリアントに変更し、[動画の状態をリセット]のチェックを外します。
4. コンポーネントのインスタンスを複数付けてフレームを作成し、動画を置き換えてコンポーネントを再利用します。

プレイグラウンドファイルを使用して、動画を使ったプロトタイピングの別の方法を試す→