Figmaのデザインやプロトタイプを動画に録画

Crypto Webアプリでデザインやプロトタイプを操作する様子を録画し、ダウンロードできる動画にします。

動画チュートリアル：Figmaのプロトタイプを動画ファイルに録画する

この動画では、Cryptoプラグインを使って、Figmaのプロトタイプの操作を動画ファイルに録画する方法を説明します。

インタラクティブなFigmaプロトタイプを動画ファイルに録画する ​

Crypto WebアプリのツールバーにあるRecordアイコンボタンをクリックすると、Crypto Webアプリでプロトタイプを操作する様子を録画できます。画面共有と音声へのアクセスをページに許可するよう求められます。許可すると、共有して録画するソースとしてブラウザのタブを選べるようになります。

録画を止めるには、ブラウザのStopボタンをクリックします。

録画を止めると、.webm形式の動画がパソコンのデフォルトのダウンロードフォルダに自動的にダウンロードされます。

タブを閉じると動画が自動的にダウンロードされます。画面の録画中にうっかりタブを閉じてしまった場合でも、Crypto Webアプリが自動的に録画を止め、タブを閉じた時点までに録画された動画ファイルをダウンロードします。

プロトタイプの全画面表示を切り替える。ブラウザのウィンドウ表示ではなく全画面表示でプロトタイプを見たい場合は、キーボードのFキーを押します。キーボードのescキーを押すと、いつでも全画面表示を終了できます。

録画した動画ファイルを開いて見る ​

.webmファイルがダウンロードされたら、自分のWebサイトにアップロードしたり、Slackなどで誰かに送ったり、編集して別の動画形式に変換したりできます。ダウンロードした動画ファイルを開くいちばん簡単な方法は、ファイルをWebブラウザにドラッグして再生することです。

Figmaの静的なデザインを動画ファイルに録画する ​

Crypto Webアプリのツールバーにある録画アイコンボタンをクリックすると、Crypto Webアプリでデザインを閲覧する様子を録画できます。画面共有と音声へのアクセスをページに許可するよう求められます。許可すると、共有して録画するソースとしてブラウザのタブを選べるようになります。

録画を止めるには、ブラウザの停止ボタンをクリックするか、録画アイコンボタンをもう一度クリックします。

録画を止めると、.webm形式の動画がパソコンのデフォルトのダウンロードフォルダに自動的にダウンロードされます。

タブを閉じると動画が自動的にダウンロードされます。画面の録画中にうっかりタブを閉じてしまった場合でも、Crypto Webアプリが自動的に録画を止め、タブを閉じた時点までに録画された動画ファイルをダウンロードします。

デザインの全画面表示を切り替える。ブラウザのウィンドウ表示ではなく全画面表示でデザインを見たい場合は、Crypto Webアプリのツールバーにある全画面アイコンボタンをクリックします。キーボードのescキーを押すか、全画面アイコンボタンをもう一度クリックすると、いつでも全画面表示を終了できます。

録画した動画ファイルを開いて見る ​

.webmファイルがダウンロードされたら、自分のWebサイトにアップロードしたり、Slackなどで誰かに送ったり、編集して別の動画形式に変換したりできます。ダウンロードした動画ファイルを開くいちばん簡単な方法は、ファイルをWebブラウザにドラッグして再生することです。