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

デバイスリンク

開発者やゲームデザイナーのためのFigmaは、オーディオ、ビデオ、アニメーション効果を組み込んだ豊富なプロトタイプを作成するための頼れるツールです。その機能を適切にテストするためには、プロトタイプをGIFとしてエクスポートし、実際にどのように機能するかを確認する必要があります。

PC またはモバイルデバイスから Figma プロトタイプを GIF としてエクスポートする方法

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

Figma からアニメーション GIF をエクスポートする最も簡単な方法は、TinyImageプラグインを使用することです。

プラグインのインストール方法

Figma アカウントにログインし、「コミュニティ」セクションに移動します。
検索ボックスに「TinyImage」と入力します。
「プラグイン」セクションで「TinyImage Compressor」アイコンを見つけ、インストールボタンをクリックします。

GIF の作成方法

保存したいデザインプロジェクトを開き、「プラグイン」を選択し、「TinyImage Compressor」を起動します。
プラグインウィンドウの「GIFの作成」ボタンを押します。
Figmaキャンバス上のレイヤーを選択し、「選択したレイヤーを使用」をタップします。
フレームを順序入れ替え、スライドショーの再生速度を調整します。
設定が完了したら、「GIFをエクスポート」ボタンをタップします。
フレームが結合されて GIF が形成され、自動的にダウンロードされます。

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

iPhone にて、Figmaアプリの画面を録画し、ショートカットアプリを使ってGIFを作成します。

画面録画手順

Figma アプリを開きます。
「設定」に入り、「コントロールセンター」を選択。
「コントロールのカスタマイズ」を選択し、「画面録画」の機能を有効にします。
コントロールセンターに戻り、画面録画ボタンを押します。
録画完了後、ローラーアイコンをタップして録画を終了します。

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

Android デバイスでは、プレビュー機能を使用して、録画した画面を GIF に変換します。

画面録画手順

アプリを起動し、プロジェクトのプレビューを開きます。
画面上部からダブルスワイプして「画面録画」を選択。
プロトタイプのプレビューを記録するボタンを押します。
録画が開始され、終了する場合は通知をダブルタップします。

GIPHY アプリを使用し、録画されたビデオを GIF に変換できます。

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

あなたがプロの開発者であろうとアマチュアのデザイナーであろうと、Figma 作品を GIF 形式で共有する便利な方法を持つことは重要です。Figma がエクスポート機能を強化するまで、この記事で紹介した方法を信頼してください。

このガイドが、Figma 作品から高品質の GIF を得るための役立つ参考になれば幸いです。使用しているデバイスに関係なく、エクスポート方法についてのご意見や質問は、以下のコメント欄でお知らせください。

Tags: #Figma GIF #GIF export #Figma export methods

28 Comments

まさき - 02/19/2025 19:39

GIF作成についてもっと詳細な記事を期待しています。特に、各種設定の意味について詳しく知りたいな。
あいり - 02/20/2025 04:00

本当に助かりました！GIFが簡単に作れることを知ることができ、今後のデザインに役立てたいと思います。
あきこ - 02/20/2025 17:44

文章がわかりやすくて、すぐに試すことができました。GIFが作れて嬉しい！これについてもっと知りたいです
けんた - 02/21/2025 00:08

素晴らしいガイドですね！GIFを使ってみたいと思っていたので、非常に役立ちました。これから新しいプロジェクトで使ってみます！
しょうた - 02/22/2025 11:02

初めてGIFを作ってみましたが、思った以上に時間がかかりました。みんなはどうやってスムーズに作業していますか
ゆうすけ - 02/23/2025 14:19

お手本にしました。友達にも教えたいです！Figmaのエクスポート機能についてもっと学びたいな〜
しょうこ - 02/26/2025 19:54

記事を見て実際にやってみたけど、設定にちょっと手間取りました。いい方法があれば教えてほしいな
りょうが - 02/26/2025 20:17

GIFを作るのは楽しいですが、サイズや解像度に苦労しています。誰かアドバイスをくれると嬉しいです
てつや - 02/27/2025 03:23

GIF作成の過程で楽しい瞬間があったかもしれないですね！最後の仕上げが特に好きです
しほ - 03/01/2025 04:05

FigmaのGIFエクスポートは最高！デザインがより生き生きとして見えるから、使い捨てにならないように頑張ろうと思います！
まみ - 03/02/2025 05:54

GIFを作るのがこんなに簡単だなんて！楽しさ倍増です！ありがとう
ゆうな - 03/02/2025 14:09

あまりFigmaを使ったことがなくて不安だったけど、この記事のおかげで挑戦する勇気が出たよ！ありがとう
たかし - 03/02/2025 14:28

FigmaからGIFをエクスポートする方法について、とても参考になりました！実際にやってみたら簡単にできました
たま - 03/03/2025 03:43

Figmaを使ったことがない人も簡単にできるように、もっと具体的なステップを増やしてほしいです！
かおり - 03/05/2025 03:40

FigmaのGIFエクスポートは本当に役に立ちますよね。これからのプロジェクトに活かせそうです！
こうじ - 03/09/2025 15:20

素晴らしい情報ありがとうございます！これでGIFを自由に作れるようになりますね！楽しみです
なつみ - 03/10/2025 23:07

FigmaからGIFをエクスポートできるなんて知りませんでした！さっそく試してみます
あおい - 03/12/2025 12:10

記事がすごくわかりやすかったです！特にエクスポート手順の部分が役立ちました！次のプロジェクトでも使いたいです
あやか - 03/16/2025 00:39

GIFをエクスポートした後、どのようにシェアすれば良いか知りたいです！インスタで使いたいんだけど、何かアドバイスある
やすえ - 03/17/2025 18:43

この方法、ぜひお願いしたいです。Figmaを使っているので、もっと便利な機能があれば教えて欲しい
みゆう - 03/19/2025 00:35

この手順を踏むだけでGIFが作れるとは驚きです！GIF制作のコツを教えてくれると嬉しいです。もっといいものを作りたい
たかひろ - 03/19/2025 06:50

GIFをエクスポートした後の画像をいかに見栄え良くするか工夫したいです。良いアイデアがあれば教えてください！
さくら - 03/21/2025 16:17

GIFのエクスポート、こんなに簡単だなんて思ってもみなかった。でも、クオリティが心配。どのくらいのサイズになるのかな？
たけし - 03/24/2025 03:50

記事を読んで試してみたけど、やっぱり設定が難しい....。他に簡単な方法とかってあるんでしょうか
じゅんぺい - 03/25/2025 11:49

GIFのエクスポートが可能なのは知っていましたが、こんなに簡単だとは思わなかったです。ありがとう！
まき - 03/30/2025 22:09

GIF作成がこんなに楽しいとは思いませんでした！ブルーのスクリーンでカスタマイズする楽しさを知りました。
かずま - 04/03/2025 08:13

素晴らしい記事ですね！Figmaは特に便利なので、もっと多くのテクニックをシェアしてください
リナ - 04/03/2025 22:29

私もFigmaで作ったアニメーションをGIFにしてみたいです！エクスポートの際の注意点などあれば教えていただけませんか？