Figma Motionで作ったアニメーションを、Figma MCPで取得する

以前、私が書いた「AIフレンドリーなFigmaデータとは？」では、Figma MCP Serverのget_design_contextを通して、見た目だけでなく「どう作られているか」がコード品質に効くことを見てきました。 ただしget_design_contextが返すのは、レイアウトやスタイルといった静的な構造です。アニメーションに関する情報は含まれません。

2026年6月24日、FigmaはFigma Motionを発表しました。Figmaのキャンバス上にタイムラインを追加し、アニメーションをデザインできる機能です。本稿執筆時点ではベータ版として提供されています。

そのアニメーションデータを取り出すのが、Figma MCP Serverのget_motion_contextです。キーフレーム、イージング、タイミングに加え、CSS @keyframes や Motion向けのコード断片まで返ってくるため、デザイン上の動きを実装へ落としやすくなります。

本記事では、Figma Motionでアニメーションを作り、get_motion_contextでデータを取得し、実装につながる流れを紹介します。

Figma Motionでアニメーションを設定する

今回はサンプルで作った架空のコーポレートサイトのヒーローバナーエリアに、Figma Motionで簡易アニメーションを設定してみました。

Figma MCPでアニメーションデータを取得する

次に、同じヒーローバナーエリアに対してFigma MCP Serverの2つのツールを実行しました。

• get_design_context：レイアウトやスタイルなど、静的な構造を取得する
• get_motion_context：キーフレームやイージングなど、アニメーションに関する情報を取得する

どちらも同じノードを指定しています。

get_design_context で取得できるもの

get_design_contextでは、React + Tailwind形式のコードが返ってきます。見出しやボタン、右側のビジュアルなど、ヒーローバナーエリアの構造がそのままコード化されます。

Figma Motionでアニメーションを設定した要素は、motion.div として出力されます。ただし中身のアニメーション値は含まれません。

今回取得したコードの見出し部分を抜粋すると、次のようになります。motion.div でラップされているものの、initial や animate などのプロパティは付いていません。

<motion.div
  className="..."
  data-node-id="2:477"
>
  <p className="leading-[84px] mb-0">変化を、</p>
  <p className="leading-[84px]">次の標準へ。</p>
</motion.div>

get_design_contextで取得したレスポンスの注意書きにも、次のように書かれています。

IMPORTANT: This design contains animated nodes. You MUST get the animation data via get_motion_context with the same node ID and file key.

つまり、静的な構造は get_design_context、アニメーションに関する情報は get_motion_context と、役割が分かれています。

get_motion_context で取得できるもの

get_motion_context（recursive: true）を実行すると、アニメーション対象のノード一覧と、ノードごとのコード断片が返ってきます。

今回のヒーローバナーでは10個の要素がアニメーション対象で、2.5秒のループ（durationMs: 2500, loopMode: "loop"）としてまとまっていました。

各ノードには nodeId と nodeName に加え、codeSnippets としてMotion向けのコードと CSS @keyframes の両方が含まれます。10要素すべてにコードが返ってきますが、ここでは2つのMotion向けコードを紹介します。

見出しのフェードイン

見出しには、下方向からフェードインするMotion向けのコードが返ってきました。times の値を見ると、他の要素より少し遅れて登場するようタイミングがずらされています。

<motion.div
  initial={{ opacity: 0, y: 28 }}
  animate={{ opacity: [0, 0, 1, 1], y: [28, 28, 0, 0] }}
  transition={{
    opacity: {
      duration: 2.5,
      times: [0, 0.048, 0.288, 1],
      ease: ["linear", [0.16, 1, 0.3, 1], "linear"],
      repeat: Infinity,
    },
    y: {
      duration: 2.5,
      times: [0, 0.048, 0.288, 1],
      ease: ["linear", [0.16, 1, 0.3, 1], "linear"],
      repeat: Infinity,
    },
  }}
/>

中央の円の回転・スケール

ヒーローバナー右側の円形オブジェクトの中央にある黒い円には、透明度・回転・スケールを同時にアニメーションするコードが返ってきました。

<motion.div
  initial={{ opacity: 0, rotate: 30, scaleX: 0.8, scaleY: 0.8 }}
  animate={{
    opacity: [0, 0, 1, 1],
    rotate: [30, 30, 0, 0],
    scaleX: [0.8, 0.8, 1, 1],
    scaleY: [0.8, 0.8, 1, 1],
  }}
  transition={{
    opacity: { duration: 2.5, times: [0, 0.06, 0.34, 1], ease: ["linear", [0.16, 1, 0.3, 1], "linear"], repeat: Infinity },
    rotate: { duration: 2.5, times: [0, 0.06, 0.86, 1], ease: ["linear", [0.16, 1, 0.3, 1], "linear"], repeat: Infinity },
    scaleX: { duration: 2.5, times: [0, 0.06, 0.34, 1], ease: ["linear", [0.16, 1, 0.3, 1], "linear"], repeat: Infinity },
    scaleY: { duration: 2.5, times: [0, 0.06, 0.34, 1], ease: ["linear", [0.16, 1, 0.3, 1], "linear"], repeat: Infinity },
  }}
/>

アノテーションでは伝わらなかったことが、データとして取れる

Figma Motionがない場合は、アニメーションの意図をアノテーションとして、テキストベースで書くしかありませんでした。「0.3秒でフェードイン」「下から少しスライド」といった説明を、実装者が読み取って解釈し、コードに落とし込む必要がありました。

Figma Motionでアニメーションを設定し、get_motion_contextで取得すると、duration や easing、キーフレームの値まで具体的なデータとして渡せます。見出しが何秒後に登場するか、円が何度分回転するかといった内容も、感覚的な伝え方ではなく数値として伝わるようになりました。

まとめ

「AIフレンドリーなFigmaデータとは？」で触れたget_design_contextは、AIにレイアウトやスタイルといった静的なデザイン構造を渡す入口になってきました。Figma Motionとget_motion_contextの組み合わせは、動的な情報の詳細までAIに渡せるようになりました。

アノテーションを使うことと比べると、タイミング・イージング・キーフレームが数値やコードとして取得できるため、AIが動きを推測せずに実装へ反映しやすくなります。

Figma Motionでアニメーションをデザインすることで、アニメーションの情報を数値化された情報としてAIに渡すことができ、より効率的なAI駆動開発につながります。