Figma から GIF をエクスポートする方法

デバイスリンク

開発者とゲームのデザインを次のレベルに引き上げる方法をお探しですか? Figma は、オーディオ、ビデオ、アニメーション効果を満載した豊富なプロトタイプを作成できる素晴らしいツールです。ただし、プロトタイプの感触と機能を適切にテストするには、それを GIF としてエクスポートして、実際の動作を確認できる必要があります。

このガイドでは、PC またはモバイルデバイスを使用して Figma プロトタイプを GIF としてエクスポートする方法を説明します。

PC 上の Figma で GIF にエクスポートする方法

Figma からアニメーション GIF をエクスポートする最も簡単な方法は、TinyImage プラグインを使用することです。プラグインを起動して使用する前に、Figma アカウントにログインし、「コミュニティ」セクションに移動する必要があります。

プラグインをダウンロードするには:

検索ボックスに「TinyImage」と入力します。
「プラグイン」セクションで「TinyImage Compressor」アイコンを見つけます。
アイコンの横にあるインストールボタンをクリックします。

プラグインをインストールしたら、GIF として保存するデザインプロジェクトを開きます。画面上の任意の場所をクリックして、ドロップダウンメニューを開きます。「プラグイン」を選択し、「TinyImage Compressor」をタップして起動します。

プラグインを使用して GIF を作成する方法は次のとおりです。

プラグインウィンドウの上部にある「GIFの作成」ボタンを押します。
Figma キャンバス上のレイヤーを選択します。これらは GIF のフレームとして機能します。
TinyImage ウィンドウの下部にある「選択したレイヤーを使用」オプションをタップします。ウィンドウの中央に、選択した順序でレイヤーのスライドショーが表示されます。
プレビューの下でレイヤーアイコンをクリックし、左右にドラッグして順序を入れ替えます。
スライドショーの下にある小さな「再生」ボタンをタップして、再生速度を調整します。
時間遅延コントロールの横で、GIF をループする回数を選択します。初期設定は「無限」です。「無限」オプションをクリックして無効にし、その横のボックスに希望のループ数を入力します。
遅延時間とループオプションの下のフィールドで GIF のサイズを調整します。
レイヤーに透明な境界線がある場合は、ウィンドウの下部にある「透明な背景」ボタンを押して、GIF で境界線を表示できるようにします。
左下隅でGIFの画質を選択します。レイヤーのすべての機能を維持するには、レートを 80 または 90 程度に設定するのが最善です。
「ディザリング」コントロールは「ディザリングなし」に設定したままにしておきます。
TinyImageウィンドウの上部にある「GIFをエクスポート」ボタンをタップします。
フレームが結合されて GIF が形成され、自動的にダウンロードされてダウンロードファイルに保存されます。

レイヤリングについての注意

レイヤーのサムネイルの上にあるドロップダウンメニューを使用すると、レイヤーを左から右、または右から左に再生することもできます。ただし、GIF の最終的な外観をより詳細に制御するには、フレームを手動で順序付けすることをお勧めします。

再生についてのご注意

時間計測ライン上のボタンを移動して、デフォルトの再生速度を設定します。ただし、特定のフレームの再生速度を変更したい場合は、サムネイルをクリックし、その下のボックスで速度を設定します。

モバイルデバイスの Figma で GIF にエクスポートする方法

Figma プロトタイプには、スライドタブ、スワイプオプション、ドロップダウンメニューなどの高度なアニメーションが付属していることがよくあります。GIF として保存すると、実際のデザインを簡単に見せることができます。ただし、モバイルアプリではユーザーはプロトタイプをプレビューすることしかできません。エクスポートのサポートは組み込まれていませんが、アプリの画面を録画し、ビデオを GIF に変換することで問題を回避できます。

iPhone の Figma で GIF にエクスポートする方法

プロジェクトを iPhone に GIF として保存するには、まず Figma アプリの画面を録画し、ショートカットアプリで GIF を作成します。

iPhone で Figma を画面録画するには:

Figma モバイルアプリを起動し、GIF に変換するプロジェクトを開きます。
「設定」に入り、「コントロールセンター」を選択します。
「コントロールのカスタマイズ」を選択し、「画面録画」の横にある緑色のボタンをタップして機能を有効にします。
「コントロールセンター」に戻ります。
「画面録画」ボタンを押します。
赤いボタンをクリックして録音を終了します。

録画は通常、写真アプリに保存されます。

ビデオを GIF に変換するためのショートカットツールが iPhone にプリインストールされているかどうかを確認してください。このツールはApp Storeからダウンロードすることもできます。

iPhone でビデオを GIF ファイルに変更する方法は次のとおりです。

アプリを開き、インターフェースの下部に移動して、「ギャラリー」カードを選択します。
検索メニューの下にある「スターターショートカット」タブをタップします。
画面の一番下までスクロールし、「GIF を作成」セクションをクリックします。
「ショートカットを追加」ボタンを押してGIFショートカットを有効にします。
ショートカットがインストールされたら、「マイショートカット」に戻ります。
「GIF を作成」をタップし、「OK」を選択してアプリとフォトギャラリーを接続します。
ビデオを参照し、GIF に変換するビデオを選択します。
スライダーを使用して、GIF に含めるフレームを選択します。
「保存」をタップして変更を記録します。新しい GIF ファイルはタブレットの写真アプリに保存されます。
「完了」をクリックしてショートカットアプリを終了します。

Android デバイスの Figma で GIF にエクスポートする方法

Figma アプリではプロトタイプをプレビューできますが、エクスポートはできないため、Android デバイスでプレビューを記録し、後でビデオを GIF に変換します。

Android で Figma を画面録画する方法は次のとおりです。

アプリを起動し、プロジェクトのプレビューを開きます。
画面上部からダブルスワイプして「画面録画」を選択します。そこにない場合は、右にスワイプしてみてください。場合によっては、画面上部の「編集」アイコンをタップして、非表示のメニューを表示する必要がある場合があります。「画面録画」機能もあるかもしれません。
プロトタイプのプレビューをタップして、記録することを示します。
「開始」ボタンをクリックします。カウントダウンが終了すると、画面が記録されます。
録画を停止するには、下にスワイプして「スクリーンレコーダー」カードをタップします。

Figma プレビューのビデオは Android 写真アプリに保存されます。GIPHY アプリを使用して GIF に変換できます。

Android デバイスでビデオを GIF に変換するには:

デバイスにGIPHY アプリをインストールして起動します。
サインアップして GIPHY アカウントを作成します。
インターフェースの右上にある「作成」ボタンを押します。
アプリがカメラにアクセスできるようにします。
Android ギャラリーからビデオを選択します。
ビデオの長さを調整します。GIPHY アプリを使用すると、ユーザーはテキストやステッカーなどの要素をファイルに挿入できます。
アプリの下部にある「矢印」アイコンをクリックします。
「GIFを共有」を選択し、「GIFを保存」を選択します。

制限なしでGIFをエクスポート

あなたが経験豊富な開発者であろうと、アマチュアのデザイナーであろうと、自分の作品を GIF 形式で他の人に見せる便利な方法を持つべきです。Figma アプリで作品をプレビューできますが、インターネット接続が切断されると、デザインにアクセスするのが困難になる可能性があります。Figma がユーザーフレンドリーなエクスポートソリューションを発表するまでは、この記事で説明した方法を信頼してください。

このガイドが、使用しているデバイスに関係なく、Figma 作品から高品質の GIF を取得する方法をよりよく理解するのに役立つことを願っています。

Figma のウェブ版またはモバイル版を使用していますか? GIF をエクスポートするための好ましい方法は何ですか? 以下のコメント欄でお知らせください。