--- url: "/ja/tinyimage/gif.md" description: "選択したFigmaのレイヤーから、並び順、タイミング、エクスポート設定を指定してアニメーションGIFを作成します。" --- # レイヤーからアニメーションGIFを作成する > 選択したFigmaのレイヤーから、並び順、タイミング、エクスポート設定を指定してアニメーションGIFを作成します。 ### 動画チュートリアル：アニメーションGIFを作成する この動画では、TinyImageプラグインを使って、自分のデザインからFigmaで直接GIFをアニメーション化してエクスポートする方法を紹介しています。 [Embedded media](https://www.youtube-nocookie.com/embed/FYlk5a69Ewc) ### 動画チュートリアル：FigmaでアニメーションGIFのエクスポートにトランジション効果を追加する この動画では、TinyImageプラグインを使って、FigmaでアニメーションGIFのエクスポートにフェード、スライド、ワイプのトランジション効果を追加する方法を紹介しています。 [Embedded media](https://www.youtube-nocookie.com/embed/GwfVWRAS1qk) 選択したFigmaのレイヤーからGIFやMP4ファイルをアニメーション化してエクスポートするには、**GIF**タブを開いて**Create a GIF/MP4**を選びます。 ## Figma Motionアニメーションをエクスポートする {#export-a-figma-motion-animation} Figma Motionで作成したアニメーションをエクスポートするには、**GIF**タブを開いて**Figma Motion Export**を選びます。TinyImageは、現在の選択またはページにあるMotionフレームを、各チェックボックスの横に静止サムネイルを付けて一覧表示します。1つ以上を選び、共通の出力形式、フレームレート、サイズ、ループ、GIFの圧縮、カラーパレット、動画の画質を設定します。 TinyImageは、GIF、MP4、WebMの出力にFigmaネイティブのMotionレンダラーを使います。ネイティブのGIFレンダリングを、非可逆圧縮をもう一度かけずにAPNGやアニメーションWebPに変換することもできます。 **Export**を選ぶと、チェックしたアニメーションがレンダリングされます。チェックしたアニメーションが1つなら直接ダウンロードされ、複数の場合は1つのZIPにまとめてダウンロードされます。 [Figma Motionアニメーションの確認とエクスポートの方法を見る](/ja/tinyimage/figma-motion) ## 既存のGIFやMP4を編集する {#edit-an-existing-gif-or-mp4} **GIF**タブを開いて**GIF Editor**を選びます。アニメーションGIFの塗りを持つFigmaのレイヤーを1つ選択すると**Use selected Figma GIF layer**が有効になります。デバイスからGIFやMP4を読み込むには**Choose from computer**を選びます。フレームを編集し、結果をGIF、APNG、アニメーションWebP、MP4、WebMとしてダウンロードできます。 GIF Editorの画像エクスポートは忠実さを優先します。APNGとアニメーションWebPはロスレスでエンコードされ、変更していないGIFのダウンロードやFigmaへの挿入では、元のGIFデータが再圧縮されずにそのまま使われます。 ### 既存のGIFをトリミングする {#crop-an-existing-gif} GIFを読み込んだら、**Crop**を選びます。プレビューでトリミング範囲を描くかサイズを変更するか、X、Y、幅、高さの値を正確に入力します。選択した範囲は矢印キーで動かして細かく調整できます。 **Apply crop**を選ぶと、アニメーションのすべてのフレームがトリミングされます。編集したGIFをエクスポートする前に、更新されたプレビューを確認してください。 ## FigmaでGIFの作成を始める {#get-started-with-creating-gifs-in-figma} GIF作成のワークフローの各部分は、次のページで設定できます。 - [GIFフレームの選択と更新](/ja/tinyimage/gif-layers.md): フレームとして使うFigmaのレイヤーを選び、いつでもフレームのセットを更新できます - [GIFフレームの並び順](/ja/tinyimage/gif-ordering.md): カスタム順、レイヤー順、行、列、レイヤー名でフレームを並べ替えます - [GIFのタイミングと再生の設定](/ja/tinyimage/gif-timing.md): フレームの表示時間、ループ回数、プレビューの再生操作を調整します - [GIFフレームのトランジションの追加](/ja/tinyimage/gif-transitions.md): フレーム間にフェード、スライド、ワイプのトランジションを適用して微調整します - [GIFのエクスポートオプションの設定](/ja/tinyimage/gif-settings.md): サイズ、フィット、画質、カラーパレットの処理、ディザリングを設定します - [GIFファイルのエクスポートとダウンロード](/ja/tinyimage/gif-export.md): 最終的なGIFをレンダリングし、処理が終わったらダウンロードします - [既存のGIFやMP4の編集](/ja/tinyimage/gif-editing.md): 既存のGIFやMP4をリサイズ、変形、トリミング、カット、タイミング調整してエクスポートします - [Figma Motionのエクスポート](/ja/tinyimage/figma-motion.md): Figmaネイティブのモーションアニメーションを確認し、5つの形式でエクスポートします