動画チュートリアル：アニメーションGIFを作成する
この動画では、TinyImageプラグインを使って、自分のデザインからFigmaで直接GIFをアニメーション化してエクスポートする方法を紹介しています。
動画チュートリアル：FigmaでアニメーションGIFのエクスポートにトランジション効果を追加する
この動画では、TinyImageプラグインを使って、FigmaでアニメーションGIFのエクスポートにフェード、スライド、ワイプのトランジション効果を追加する方法を紹介しています。
選択したFigmaのレイヤーからGIFやMP4ファイルをアニメーション化してエクスポートするには、GIFタブを開いてCreate a GIF/MP4を選びます。
Figma Motionアニメーションをエクスポートする
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アニメーションの確認とエクスポートの方法を見る
既存のGIFや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をトリミングする
GIFを読み込んだら、Cropを選びます。プレビューでトリミング範囲を描くかサイズを変更するか、X、Y、幅、高さの値を正確に入力します。選択した範囲は矢印キーで動かして細かく調整できます。
Apply cropを選ぶと、アニメーションのすべてのフレームがトリミングされます。編集したGIFをエクスポートする前に、更新されたプレビューを確認してください。
FigmaでGIFの作成を始める
GIF作成のワークフローの各部分は、次のページで設定できます。