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

デバイスリンク

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

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

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

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

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

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

  1. 検索ボックスに「TinyImage」と入力します。
    Figma から GIF をエクスポートする方法
  2. 「プラグイン」セクションで「TinyImage Compressor」アイコンを見つけます。
    Figma から GIF をエクスポートする方法
  3. アイコンの横にあるインストールボタンをクリックします。
    Figma から GIF をエクスポートする方法

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

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

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

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

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

再生についてのご注意

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up and earn $1000 a day ⋙

Google Chrome、Safari、Edgeでポップアップブロッカーを無効にする方法

Google Chrome、Safari、Edgeでポップアップブロッカーを無効にする方法

すべてのプラットフォームのすべての一般的な Web ブラウザには、ポップアップ ブロッカーが組み込まれています。通常、これらは、不要なポップアップをブロックするのに十分賢いので、

EA アプリがログアウトし続ける問題を修正する方法

EA アプリがログアウトし続ける問題を修正する方法

Windows 上のエレクトロニック アーツ (EA) アプリは、お気に入りのゲームにアクセスするための主な目的地です。したがって、次のような場合には、信じられないほどイライラする可能性があります。

Web サイトが最初に公開または開始された時期を確認する方法

Web サイトが最初に公開または開始された時期を確認する方法

Web サイトの公開日や公開日を見つけるのに、誰もがそれなりに苦労しました。学校のエッセイの出版日を取得する必要がある人もいますが、

SoundCloudでプレイリストの画像を変更する方法

SoundCloudでプレイリストの画像を変更する方法

音楽をアップロードする場合でも、ワークアウトに最適なプレイリストを厳選する場合でも、プレイリストのカバー アートワークは他の SoundCloud で最初に表示されます。

Minecraft で最後のレイダーを見つける方法

Minecraft で最後のレイダーを見つける方法

Minecraft のレイドの最後で、排除する最後のレイダーを探していることに気付いた場合、あなたは一人ではありません。多くのプレイヤーがそれを経験しました

Google Chrome、Firefox、Microsoft Edge、SafariでJavaScriptを有効にする方法

Google Chrome、Firefox、Microsoft Edge、SafariでJavaScriptを有効にする方法

JavaScript は、インタラクティブな Web を支える最も強力なダイナモの 1 つです。このプログラミング言語を使用すると、Web ページがユーザーのアクションにリアルタイムで応答できます。

Hisense TVエラーコード014.50を修正する方法

Hisense TVエラーコード014.50を修正する方法

Hisense TV は、市場で最高の ROKU TV の 1 つとして評価されています。ただし、試行中にテレビにエラー コード 014.50 の通知が表示される場合があります。

Amazon Fire Stickの音量を制御する方法

Amazon Fire Stickの音量を制御する方法

2024 年にリモコンを管理しようとするのは、請求書を処理しようとしているような気分になります。ありがたいことに、Fire Stick を使用してお気に入りの番組をストリーミングしている場合は、

IPhone からすべての写真を削除する方法 (永久に失わずに)

IPhone からすべての写真を削除する方法 (永久に失わずに)

Apple の携帯電話には、拡張できない一定量の内部ストレージしか搭載されていないため、すぐに容量が足りなくなる可能性があります。ある時点で、あなたは、

ハイセンスTVでアプリをアップデートする方法

ハイセンスTVでアプリをアップデートする方法

ハイセンスは、スマート TV テクノロジーに関してますます人気の高いブランドです。同社は、予算に優しい LED および ULED (Ultra LED) ユニットを製造しています。

Roblox: 首なし首の入手方法

Roblox: 首なし首の入手方法

Robolox で、ユニークな装飾効果で知られる限定の Headless Head を購入または取引するための完全なガイド。

Telegram で誰かの電話番号を表示する方法

Telegram で誰かの電話番号を表示する方法

Telegram へのアカウント登録中に、個人情報に電話番号を追加する必要があります。他の人の確認に興味がある場合は、

Amazon Photosの写真をEcho Showに表示する方法

Amazon Photosの写真をEcho Showに表示する方法

このガイドでは、Amazon Photos を使用して Amazon Echo Show をデジタル フォトフレームに変える方法を説明します。

オンライン注文フォームの作成方法

オンライン注文フォームの作成方法

オンライン注文フォームを使用すると、企業は顧客から手間をかけずに注文を受けることができます。オーダーフォームを使用して、顧客は製品の注文、

DoorDash: 返金を受ける方法

DoorDash: 返金を受ける方法

DoorDash の注文の返金方法をお知りになりたいですか?払い戻しを受ける方法や払い戻しのスケジュールなどをすべて確認してください。

Google マップでラベルをオフにする方法

Google マップでラベルをオフにする方法

ラベルは、場所を簡単に見つけるのに役立つ Google マップの不可欠な機能です。しかし、どこを見てもピンや旗で埋め尽くされた地図は、

Canva: ビデオに音楽を追加する方法

Canva: ビデオに音楽を追加する方法

サウンドトラックがあるとビデオがさらに楽しくなります。ムード音楽を追加して視聴者を魅了する場合でも、動画に効果音を追加する場合でも、Canva

Snapchat: 番号を変更する方法

Snapchat: 番号を変更する方法

何らかの理由で電話番号を変更したばかりです。これは大きな決断であり、特にしばらくその数字を持っている場合には重要です。しかし、この変更により、

HubSpot で大量の電子メールを送信する方法

HubSpot で大量の電子メールを送信する方法

一括電子メール マーケティングでは、1 つの電子メール キャンペーンを多数の受信者に同時に送信できるため、時間を大幅に節約できます。それは

Hisense TV: システム メモリ不足の問題を解決する方法

Hisense TV: システム メモリ不足の問題を解決する方法

ハイセンス製テレビのシステムメモリ不足の問題に対処することにうんざりしていませんか?この問題を解決するための実用的な解決策をいくつか紹介します。